Summary of Box Models

  1. In the W3C box model, the width of an element gives the width of the content of the box, excluding padding and border.
  2. In the traditional box model, the width of an element gives the width between the borders of the box, including padding and border.

The Problem

width=500px; border:1px solid #CC0000; padding:20px;

The width of this is actually 542px because of the 1px border on its left and right. This shows up as 542px on IE as well.

Solution

width=500px; border:1px solid #CC0000; padding:20px; -moz-box-sizing:border-box;

-moz-box-sizing:border-box will cause the box sizes to be applied to the border and everything inside it (traditional model). Thus, making it actually 500px including the 1px border on its left and right. More info over at quirksmode.org.