Box-sizing and Layouts

If you've switched over to using border-box like recommended in http://paulirish.com/2012/box-sizing-border-box-ftw/ then you'll find a bit of trouble getting your content size to play nicely with padding.

The trick is that if you have a border-box with padding then the inner div with the same sizing won't respect the padding if it's given width: 100%. So how do we get it to respect the padding without using absolute positioning.

The trick is that you're going to have to mix our box sizing models. We'll use two divs - the outer div will be used for positioning and padding while the inner div is used to respect the content width. You'll need a structure like this:

<div class="column">
<div class="content">
    <!-- content goes in here -->
</div>
</div>

The div with a class of column should already have the border-box from the link. Now we'll just give it some padding.

.column {
    padding: 0 10px;
}

Now we can have a class for content that looks like this:

.content {
    width: 100%;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

viola! we can now position everything in the content div and it'll respect the padding.