The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Extra Padding caused by DOC Type declaration

declaration in a new project I am working on. However, when I do this, it adds about 10 pixels of white space on the right side of the page. I have a div set to run 100% across the page, and it gets stopped about 10px short. When I take the DOCTYPE out, problem goes away. Maddening. Would like to see if anyone else has encountered this. I've tried to eliminate as many possible causes and I keep coming back to this.

Thanks, tried that too, no success. I've pared down the code to a minimum and put the stylesheet inline so people can see it all in one place..

if look at this code, then subtract the DOC type, voila, it works proper. I've gone through div by div and it seems that the problem may also be lying in the <div class="topnavbackground"> div, although I can see nothing that would be causing it to stop short of going 100%. Agh! Thanks for all your responses!

Will actually be 100% plus 10 pixels wide because of the extra right padding you've assigned. According to the W3C CSS specs, any padding, borders, or margins applied to an element will ADD to its overall width rather than include itself in the width value. For more information, check out this site: http://www.tantek.com/CSS/Examples/boxmodelhack.html.

For a fix to your problem, you can just remove the width setting completely in my code sample above, as <div>s default to 100% width anyway.

thanks, I think that got part of it, I've determined that in the topnav div, if I set the right padding to 10px, it is pushing the following divs over 10px as well, even though they are set to 0 padding. As I understand it, margin adds space outside the div and padding should be adding space inside the div, so I'm not sold on the padding making it 110%...the padding should merely be keeping my text 10px from the edge, while I want the color bar to run 100%...

see below, I'm wondering if this is actually some Inheritance issue? I've stripped out all un-needed code and just left with these two divs. If you take out the 10px right padding on the topnav div, everything goes to the edge. (like it should), however, by adding 10px right padding to the top nav div, i should be able to keep the text from hitting the edge...also, as to divs defaulting to 100%, I have requirements that the header flow as wide as the browser, so the only way I've been able to do that is force those divs 100%, I can't set it in a fixed position...

you know what, after looking at it more, you are right (sorry no disrespect earlier), i ran a test and it is indeed pushing it out. As a result, I made the div 95% which brought it out from the edge like I need. Not sure if it's the correct fix, but it works for now! Thanks for your insight!

you know what, after looking at it more, you are right (sorry no disrespect earlier), i ran a test and it is indeed pushing it out. As a result, I made the div 95% which brought it out from the edge like I need. Not sure if it's the correct fix, but it works for now! Thanks for your insight!

As I understand it, margin adds space outside the div and padding should be adding space inside the div, so I'm not sold on the padding making it 110%...the padding should merely be keeping my text 10px from the edge, while I want the color bar to run 100%...

I know that you've resolved it now, but to explain this - the padding is added inside the border boundary which is placed at a point equal to the stated width + the stated padding of an element - with the stated width being reserved for content. In IE5's broken box-model what you describe above is what happens, but in standards compliant browsers, and IE6 when not in quirks mode, it's as advised by Vinnie