A "row" to use with any grid system

This article was first published on CSS-101 (03-20-2012).

This is a technique to style a box as a row. A block that expands to fill its container, contains floats, and more.


.row {
    clear: both;
    display: inline-block;
    vertical-align: top;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    *display: block;
    *width: auto;
    zoom: 1;


How it works

This makes sure the box clears any previous floats (left or right floats).
This creates a block-formatting context, a box that contains floats (more about BFC). Unlike “overflow:hidden”, “inline-block” is a BFC trigger that allows children of a box to be displayed outside of its boundaries.
By default, inline-block boxes are aligned to the baseline, so we make sure to align them at the top.
Without this, the box would shrink-wrap (that’s what inline-block does to boxes).
box-sizing: border-box
Because our box has a width, we rely on box-sizing to be able to add padding and border without making the box grow wider than its container.
The -webkit- prefix is used for iOS Safari < 5.0, Android < 4, and Blackberry 7.0. The -mox- prefix is used for Firefox up to version 21.0 (today’s latest). Check Can I use.
Even though we can “fake” inline-block styling in IE 6 and 7, there is no point of trying this here because those browsers don’t support box-sizing (the trick we use to be able to style the box with border or padding).
Since in oldIE we style the box with display:block it won’t shrink-wrap, thus we can reset the width.
For IE 6 and 7 we can rely on the best tool evar: hasLayout. Giving a layout to the box creates a block-formatting context that does not shrink-wrap (something CSS is seriously missing).

Warning about min/max width and height

Firefox 16+ don’t handle the combination of “box-sizing” and “min-height” / “max-height” while IE8 does not handle the combination of “box-sizing” with “min/max-width” or “min/max-height”.

If you do need to set a min height or width, you can then use a pseudo-element for modern browsers,_width or _height for IE6 and *min-width or *min-height for IE7.