The CSS standard states that borders and padding should be applied on top of the specified width of an element. As such, if I have a 200px div, and apply 40px worth of borders and padding, total, the width will then be 240px. This makes perfect sense; however, Internet Explorer actually did things differently. They adopted a model where the maximum width is what you specified. The borders and padding are then factored into that width, reducing the content area. As a result, the width of the element never exceeds the stated width of 200px.
As we mostly work with extremely sensitive floated layouts, where even the addition of a 1px border can break the design, I wonder: did Internet Explorer get it right?
(Continue)
Follow Nettuts+ and Tuts+ on Twitter