Flexible height block grids with inline-block

In a floated grid, all it takes is one slightly taller grid element to break the whole layout.

If this weren't a responsive design, you could fix the height and call it a day, but nearly everything I build these days is responsive. Here's where the inline-block fix saves the day:

/* Inline-Block Grid */ .grid-element { display: inline-block; vertical-align: top; /* line up the tops of the blocks */ width: 33%; /* NOTE */ }

NOTE: because whitespace counts in inline-block, you'll have to either round down from a full 100% or eliminate all whitespace between elements in your HTML file. I tend to choose the former option, as I'm often not in complete control of markup.

Bonus: no clearfix needed!