A lot of frustration in creating web page layouts results from a misunderstanding of the CSS box model. To be fair, this isn’t entirely the fault of web developers or designers; blame can be equally apportioned to the oddities of the CSS spec itself.

Very simply, the width and height of an HTML element is not what most people assume it is. By default, the width of an element is the width of its content, not necessarily the width of the containing box: padding, border and outline are added to the width you set for any element. This leads to situations like the following:

Let’s say we have the opening two paragraphs from Mary Shelly’s Frankenstein, each provided with a different id:

1. <p id="first">I am by birth a Genevese; and my family is one of the most
2. distinguished of that republic…
3. <p id="second">As the circumstances of his marriage illustrate his character…

We want to have both paragraphs to have a width of 50%, floated side-by-side on the page:

1. p { width: 50%; }
2. p#first { float: left; }
3. p#second { float: right; }

All looks fair and well to this point, as you can see to the right. Trouble occurs when we add a border to the paragraphs. As you will see, adding just a few pixels is enough to throw the paragraphs out of alignment:

1. p { width: 50%; border: 1px solid #000; }

This gives the result you see to the left. Historically, this behavour is one of the reasons I have preferred to use display: table-cell and its related properties to create column layouts in web pages. But changing the box-sizing model with a CSS3 addition can fix this particular issue:

1. p { width: 50%; border: 1px solid #000; box-sizing: border-box; }

border-box calculates each element’s width to the outside of its border. This means we can add padding to the paragraphs and still retain their alignment:

1. p { width: 50%; border: 1px solid #000; box-sizing: border-box; padding: 3em; }

Note, however, that adding margin to the paragraphs will throw them out again, as the box-sizing model does not accommodate space outside the element.

box-sizing can also be set to padding-box, which takes into account padding but not border. The default box-sizing value is content-box.

As the traditional box-model can be so counter-intuitive and problematic, and this new setting so useful, it is suggested that setting box-sizing to border-box should be part of an opening CSS reset, with vendor prefixes added to support older versions of browsers:

1. * { -moz-box-sizing: border-box;
2. -webkit-box-sizing: border-box;
3. box-sizing: border-box; }