Ho to align elements that have different margin and padding

The site I am developing uses a header div without any margin, border or padding but the content div has padding to create a border. This creates a problem because the right edge of the content div shifts outwards and is no longer aligned with the header.

I cant simply change the width because it needs to be able to adjust when the window is resized (ie. using % not px). I tried using negative margins but could not get it to work.

How can I solve this problem? Is there a way of specifying a width as a percentage minus x amount of pixels?

Any help appreciated.

 

Which browser you faced this issue? I think it's the box model issue.

I don't think so, however you can specify browser specific CSS properties.

 

If you are using a proper doctype, there are no "box model issues" thought IE has plenty of bugs to mess with your head.

No, there is no way to do percentags minus pixels.

Without a link (preferred) or the complete markup, this is complete guesswork.

 

the site is at http://tempsite.us.to

I'm using firefox but its not a browser issue.

 

Offcourse, markup is horrible and there is an effort to fix the markup with css.

Anyways, to fix the issue in YOUR WAY, you might do the following chages to your css,

div#container {
padding:15px; <-- [COLOR="red"]step 1: remove[/COLOR] -->
}
#sidebar{
margin-left:-269px; <-- [COLOR="red"]change to 269px [/COLOR]-->
margin-top:15px; <-- [COLOR="red"]add[/COLOR] -->
margin-bottom:15px; <-- [COLOR="red"]add[/COLOR] -->
}
.padder{
margin-right:268px; <-- [COLOR="red"]change to[/COLOR] -->
}

Code (markup):