In the current limbo of grid-design possibilities for web design, what solutions should we pursue? I would suggest using the properties of CSS display: table, for the following reasons:

1. Strong, consistent support for CSS2 in all modern browsers, including IE8 (but not, sadly, IE7 or earlier, which must fall back to conditional stylesheets.
2. Uses a reference that is already familiar to web developers.
3. Easily hooked into semantic markup.
4. Independent of JavaScript.

When I talk about display: table, I am referring to the family of table properties that display can be set to. These include: display: table; display: table-cell; display: table-row; display: table-caption; display: table-column, and several others. Complete coverage of all of these values would be exhaustive; for the purposes of illustration, I will stick to the most commonly-used variations.

There are a few general rules to keep in mind:

Elements defined as display: table-cell will appear on the same (implied) row, arranged horizontally. Each implied cell will be the same height (determined by the “cell” with the greatest amount of content).
• Elements defined as display: table-row will display on new lines.
• Elements defined as display: table-caption will appear at the top of an implied table, by default.
• Elements with differing display qualities can be nested inside each other, just as real tables can be nested inside table cells.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.