Sometimes the W3C box model just doesn't make sense

So we grab a different one

Current rendering mode:

All red elements on this page are 400 pixels wide and have a 5 pixel border

div { width: 400px; border: 5px solid #00f; }

Some content, with 30px padding

Internet Explorer doesn't apply the W3C box model here. There are comments before the DTD. Mozilla and Opera are both still in standards mode.


box-sizing: content-box; -moz-box-sizing: content-box;

Some content, with 30px padding

box-sizing: border-box; -moz-box-sizing: border-box;

Some content, with 30px padding

This is the one making most sense if you ask me..


-moz-box-sizing: padding-box;

Some content, with 30px padding

Home - More stuff