Padding make me angry! Please make it stop!

[BricksClicks nl]

I have a problem.

Below is my css for creating a layout. Everting works fine in IE and firefox. But something weird happens when i set the padding of #rightcol to a value. In the case 5px. What happens is that the entire div expanse 5px instead of nog moving at all and pushing the content inwards... What is wrong... my html is below the css...

Thanks in advance

html, body {
margin: 0;
padding: 0;
text-align: center;
}
#pagewidth {
width: 735px;
text-align: left;
min-width: 500px;
margin-left: auto;
margin-right: auto;
}
#header {
height: 100px;
width: 100%;
background: #4653FF;
}
#outer {
border: solid white 0;
border-right-width: 213px;
border-right-color: #4653FF;
border-right-style: solid;
width: auto;
background: #FFF;
}
#rightcol {
width: 213px;
float: right;
position: relative;
margin-right: -213px;
margin-left: 1px;
padding: 5px;
}
#footer {
height: 100px;
width: 100%;
background: #4653FF;
}
#inner {
margin: 0;
width: 100%;
}
#maincol {
float: left;
width: 100%;
position: relative;
margin: 0 -8px 0 -2px;
}
#outer>#inner {
border-bottom: 1px solid #FFF;
}
.clr {
clear: both;
}
.content {
padding: 5px;
}
#header .content {
padding-bottom: 0;
}
@media print {
#rightcol{display: none;
}
#outer {
border-right: 0;
}

--------------------------------------

div id="pagewidth" >
<div id="header" >
<div class="content"> Head </div>
</div>
<div id="outer" >
<div id="inner">

<div id="maincol" >
<div class="content">
<p>Ullamco laboris nisi excepteur sint occaecat ut labore et dolore magna
aliqua. In reprehenderit in voluptate sed do eiusmod tempor incididunt
sunt in culpa. Duis aute irure dolor qui officia deserunt velit esse
cillum dolore. Consectetur adipisicing elit, ut labore et dolore magna
aliqua.</p><p>Eu fugiat nulla pariatur. Ut labore et dolore magna aliqua. In reprehenderit
in voluptate ullamco laboris nisi duis aute irure dolor.</p>
<p>Duis aute irure dolor excepteur sint occaecat ullamco laboris nisi. Ut aliquip
ex ea commodo consequat. Eu fugiat nulla pariatur. Consectetur adipisicing
elit, ut enim ad minim veniam, sunt in culpa.</p>
<p>Ullamco laboris nisi duis aute irure dolor sed do eiusmod tempor incididunt.
Qui officia deserunt in reprehenderit in voluptate ut enim ad minim
veniam. Ullamco laboris nisi excepteur sint occaecat sunt in culpa.
Ut aliquip ex ea commodo consequat.</p>
<p>Ullamco laboris nisi excepteur sint occaecat ut labore et dolore magna
aliqua. In reprehenderit in voluptate sed do eiusmod tempor incididunt
sunt in culpa. Duis aute irure dolor qui officia deserunt velit esse
cillum dolore. Consectetur adipisicing elit, ut labore et dolore magna
aliqua.</p>

</div>
</div>

<div id="rightcol" >
<p>Eu fugiat nulla pariatur. Ut labore et dolore magna aliqua. In reprehenderit
in voluptate ullamco laboris nisi duis aute irure dolor.</p>
<p>Duis aute irure dolor excepteur sint occaecat ullamco laboris nisi. Ut aliquip
ex ea commodo consequat. Eu fugiat nulla pariatur. Consectetur adipisicing
elit, ut enim ad minim veniam, sunt in culpa.</p>
<p>Ullamco laboris nisi duis aute irure dolor sed do eiusmod tempor incididunt.
Qui officia deserunt in reprehenderit in voluptate ut enim ad minim
veniam. Ullamco laboris nisi excepteur sint occaecat sunt in culpa.
Ut aliquip ex ea commodo consequat.</p>
<p>Ullamco laboris nisi excepteur sint occaecat ut labore et dolore magna
aliqua. In reprehenderit in voluptate sed do eiusmod tempor incididunt
sunt in culpa. Duis aute irure dolor qui officia deserunt velit esse
cillum dolore. Consectetur adipisicing elit, ut labore et dolore magna
aliqua.</p>
</div>

<div class="clr"></div>
<!-- close inner and outer -->
</div>
</div>
<div id="footer" >
<div class="content"> Footer </div>
</div>
<div class="clr"></div>
</div>

[garann]

I think you're expecting that the width of #rightCol is equal to
width - padding - border.
As far as I know, it's more like
width = width + padding + border.
In short, if you don't want the box to expand, subtract 10px (left + right padding) from the width.

[createErrorMsg]

This is a classic box model issue.

Basically, there are two ways that box widths are calculated: the standard box model, and the quirks box model.

The Standard Box Model (used by Moz, FF, IE6 with a doctype, Opera with a doctype, and other standards compliant browsers) takes your width property value and ADDS padding and borders to the outside, reserving the indicated width for the content. Thus, a 200px wide box with 5px left/right padding actually uses up 210px of screen space.

The Quirks Box Model (used by IE5.x and lower, IE6 without a doctype and Opera without a doctype) takes the width property value and packs padding and borders INSIDE of that width, reducing the effective content width. This means that, given the same width values, the Quirks box model will render an element skinner than the Standard box model.

To get a reliable cross browser layout, you have to do one of several things (unfortunately, the suggestion above to just subtract some from the width will make the boxes too skinny in quirky browsers).

(A) Use hacks to deliver a special width (one that includes the padding) to IE browsers ONLY (and then another hack to hide that width from IE5/mac and another to hide it from IE6 if it has a doctype).
(B) Use conditional comments to deliver a special stylesheet containing the Quirks widths to specific "quirky" browsers.
(C) Avoid giving a single box both a width AND padding (or borders).

Option (C) is the easiest to explain, so I'll go ahead and do that here and let you research the other two yourself if you want more info.

The box model problem only crops up when you have a box with both a width and a padding (or border). A box with only a width is rendered the same between browsers. A box with only padding is also rendered the same. So avoiding browser differences means not giving the same box both width and padding.

One way to do this is to nest a second div inside of the first. We'll call it the "inner" div. We will then apply the width to the original "outer" div, the padding to the new "inner" div, and then place all of our content inside of the "inner" div...

html:
<div id="outer">
<div is="inner">
<h1>Content</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>

css:
#outer {
width: 400px;
}
#inner {
padding: 10px;
}

If you don't like the idea of adding an extra div (some people feel it violates the ideal of seperating structure and style), you can drop the "inner" div and just apply the padding to the elements inside of the div...

html:
<div id="outer">
<h1>Content</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
</div>

css:
#outer {
width: 400px;
}
h1, p{
padding-left:10px;
padding-right: 10px;
}

Again, since nothing is given both a width and padding, there is no difference in how the two box models will render the elements.

cEM