Beyond HTML5 and CSS3

In the old days, there were two box models; the Internet Explorer “quirks mode” box model and the standard box model.

In the standard box model, the size of the box was the width of the box plus the padding. So if you had defined your box to be 300px wide, and you had padding: 10px then the size of your box would be 320px, or 300px + 10px left padding and 10px right padding. This is one of the most difficult things to learn when doing CSS layouts.

But in the “quirks mode” box model in IE6, the size of the box would be the width of the box, and if you applied padding or borders, it would adjust accordingly. Personally, I always thought that was the more reasonable approach, but it was also the number one reason sites looked weird in other browsers if you designed them in IE.

Fast forward to now, and we have a new solution. Add this to your CSS:

*, *:before, *:after{
  -moz-box-sizing: border-box;
  -webkit-box-sizing:    border-box;
  box-sizing: border-box;
}

The box-sizing property makes the box model work just like quirks mode in IE. To put it simply, that means when you’re dividing the page into columns and you say that each column is 50% wide, then no matter what kind of padding you put in those columns, the width will not change.

I recommend this approach, but you should be aware that it won’t work in IE 8 and below.

You can read more about this at http://www.paulirish.com/2012/box-sizing-border-box-ftw/