A "row" to use with any grid system

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

clear: both
This makes sure the box clears any previous floats (left or right floats).
display: inline-block
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.
vertical-align: top
By default, inline-block boxes are aligned to the baseline, so we make sure to align them at the top.
width: 100%
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.
*display: block;
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).
*width: auto
Since in oldIE we style the box with display: block it won’t shrink-wrap, thus we can reset the width.
zoom: 1
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.