Setting Box Width

The width of an element is applied to the content area. Other measurements, such as padding, border, and margins, are added to this width.

For example, if an element is specified with width: 200px;, the content area is 200px wide. If padding, border, or margin are applied to the same element, their measurements are added to the overall width.

However, Internet Explorer 5 for Windows (and Internet Explorer 6 for Windows in some circumstances) will use a different method to set widths for boxes. If padding and border are applied to an element, their measurements are subtracted from the overall width. This is shown in Figure 5.3.

Figure 5.3. CSS box model showing Internet Explorer width problem.