Improving the Box Model with Box-Sizing

Let’s say that I am cod­ing up a page that has 2 columns, each at 50% width. Easy. Except the text doesn’t read so well with­out pad­ding. Ok, so lets add some pad­ding in; 20px should be plenty.

Layout = broken.

I no longer have 2 columns at 50% width. My columns are now stacked as their width is in excess of the 50% I defined. While this is stand­ard beha­viour based on the box mod­el, it can be con­fus­ing and also frus­trat­ing to work with. There is an easy fix though: box-sizing: border-box;.

Using box-sizing forces the pad­ding (and bor­ders) inside the ele­ment rather than out­side and it works on all browsers down to IE8, although you will have to use browser pre­fixes: