CSS border box, here we come

Hey, remember that time when you switched from the table layout to div layout?

This is the time to be “out with the old and in with the new”.

We’ll be leaving behind the contraption that alleviate the pains of the CSS box model.

Just to refer to that contraption, familiar with this?
[code]
<div class="module">
<div class="module-container">
<div class="module-content">
Content
</div>
</div>
</div>
[/code]

To not worry about computing widths, we apply it to module-container and the paddings, borders, and margins to module-content.

[code]
.module-container {width:75%;}
.module-content {
margin:1em;
padding:1em;
border:1px solid red;
[/code]

This way, we know that 75% is 75% and no additional values from the other parameters.

But to get rid of module-container and module-content in the HTML markup, we simply apply a border-box:box-sizing style to module.

[code]
<div class="module">Content</div>
[/code]

[code]
.module {border-box:box-sizing;}
[/code]

This will make sure that the box follows the exact width you specify no matter how many paddings and borders you apply to the same element.

For detailed readings, read Paul Irish’s * { Box-sizing: Border-box } FTW.