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.
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):