demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Page Layouts Made Easier With CSS3 box-sizing

css / the box model

Estimated reading time: 2 minutes, 12 seconds

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:

<p id="first">I am by birth a Genevese; and my family is one of the most distinguished of that republic…
<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:

p { width: 50%; }
p#first { float: left; }
p#second { float: right; }

Floated paragraphsAll 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:

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

Paragraphs misalignedThis 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 an addition can fix this particular issue:

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:

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

Paragraphs border-boxNote, 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:

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.