Making CSS layout easier with universal border-box

A handy CSS3 tip that you might not have got around to trying is the use of the box-sizing property. This now has support in IE8 and above setting box-sizing: border-box allows you to use the more natural CSS box model and makes building CSS layouts easier.

A brief box model history

Back in the early days of the web standards movement we learned the importance of using the right
DOCTYPE
and the difference between standards and quirks mode rendering.

Most of us learned the hard way that triggering quirks mode in IE would break our layouts. The reason behind this was the differing implementation of the Microsoft and W3C box model used by standards compliant browsers:

  • W3C Box model: width + padding + border = rendered width of the box.
  • IE Quirks mode Box Model: width = actual rendered width of box with border and padding values applied inward.

!File:W3C and Internet Explorer box models.svg

Despite being an annoyance for the past ten years or so it turns out that the Microsoft implementation is more natural to work with and generally makes CSS layout more intuitive.

If you’d like to try it just use the universal CSS selector to apply it globally to your project:

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
     box-sizing: border-box;
}

Now you can set your column widths as a percentage of 100 then add your desired padding and no longer will this break your layout! :)

If your unlucky enough to still have to support IE6 and IE7 you might want to check out this pollyfill:

Try Cloud 66 for Free, No credit card required