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.

TL;DR

    .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;
    }

Features

• Expands to fill the width of its container
• Clears floats
• Contains floats
• Contains margins
• Can be styled with border and/or padding
• Does not clip overflowing content

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.