The Problem
According to the W3C, an assigned ‘width’ (and ‘height’) of a box refers to the ‘content area’ of a box only. The padding, borders, and margins are then added to this value to arrive at the total box width. If the ‘width’ property is omitted, the total box width is the same as the ‘content area’ of the surrounding container element.

All well and good. Unfortunately, all CSS enabled versions of IE before IE6/strict use a different box model. In that model, the padding and borders are counted as part of any assigned ‘width’ or ‘height’. In the absence of borders and padding, the two models agree. However, if a box has an assigned “width’, and if borders and/or padding are added, the standard box model causes the overall box width (between the outer border edges) to increase, while in IE’s model the ‘content area’ gets squeezed by the same amount. This is a major problem for proper page layout.

Consider the following CSS:

{width:100px; padding:10px; border:10px;}

When viewed in a ’standards’ browser the dimension from border edge to border edge will be ‘140px’. (100+10+10+10+10=140) Because IE5.x puts all these values inside the ‘width’, the border edge to border edge dimension will be ‘100px’.

The Hack

Just remove the padding/borders from the problem box, nest a second box inside the first, and put the padding/borders and the content within that nested box. End of problem.

XHTML:

<div id="content">
<div id="content-inner">
Text
</div>
</div>

CSS:

div#content { width: 100px; }
div#content-inner { padding:10px; border:10px; }