The two documents below illustrate the rendering errors in browsers that misinterpret the box model. On both pages, width is set to 200px, padding is set to 50px and border width is set to 10px. Correct rendering should exclude padding and border widths from the the specified width and thus show a box with a total width of 10 + 50 + 200 + 50 + 10 = 320 [the green bar below] leaving 200px for the content [the yellow bar below].

Browsers that render incorrectly include padding and border widths in the specified width and show a box with a width of 200px [the blue bar below] wich leaves 200 - 10 - 10 - 50 - 50 = 80 for the content [the red bar below].

Furthermore, the left frames use standard CSS while the right frames include Dean Edwards IE7 stylesheet which should solve the box model error for all IE browsers up from version 5.

To make things even more complicated, the top two frames use no DTD, the middle two use a loose DTD whereas the bottom two use a strict DTD.