Inline-block for vertically aligned grids
If you've tried to vertically align items with CSS, you know it can be tricky but possible. Where it appears to get complicated is when trying to build a responsive web design (RWD) grid that vertically aligns items in each row... and the rows can wrap and split into more rows. Who would have guessed the answer was a simple CSS2 feature? Not sure its right for your site? Check it out on Halo Waypoint the Official Halo website.
If you ran into issues in that past, it's probably because your grid was designed using CSS floats instead of inline-block.
How it works
Inline-block allows elements to flow like inline elements but respect properties, such as width, like block elements. This is basic stuff, however things get exciting when
vertical-align is set to
middle. Suddenly, elements on the same horizontal row align themselves vertically to each other. Try stepping it up a notch and change some elements to
vertical-align:top... crazy stuff the elements actually do what you tell them to!
The only part that feels like a hack is that you must remove all whitespace between the elements in the row. However, this makes perfect sense since the items are set as
inline-block the whitespace will cause space between the items. This is the same behavior as a link within a paragraph of text; the whitespace around the link is rendered as a space just like it would between two words. There are several different approaches you can take to remove these spaces.
Support for reversing flow
The order of columns can be easily reversed by changing a row's
direction property as follows:
This results in the elements flowing from right-to-left instead of left-to-right.
Even supports IE 6
IE6 is off many of our radars, however there are still some sites that need to support it and several that need to support IE7.