Tyson Matanich

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.

Try resizing your browser, breakpoints are set at 300, 500, and 700 pixels which move boxes to multiple rows.

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:bottom and vertical-align:top... crazy stuff the elements actually do what you tell them to!

.row div {
  /* The vertical alignment magic */
  display: inline-block;
  vertical-align: middle;
  width: 25%; /* Width controls number of elements per row */
}
inline-block allows the elements to flow and vertically align like inline elements.

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.

<div class="row">
   <div class="a"></div><!--
--><div class="b"></div><!--
--><div class="c"></div><--
--><div class="d"></div><--
--><div class="e"></div><--
--><div class="f"></div>
</div>
Html comments are one way used to remove inline whitespace, while still having the elements' HTML on their own lines.

Support for reversing flow

The order of columns can be easily reversed by changing a row's direction property as follows:

.row {
  direction: rtl;
}
.row div {
  direction: lrt;
}
Direction can be changed for the row and changed back for boxes.

This results in the elements flowing from right-to-left instead of left-to-right.

Try resizing your browser, breakpoints are set at 300, 500, and 700 pixels which move boxes to multiple rows.

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.

div {
  *display: inline;
  *zoom:1;
  *width: 16.6%;
}
A simple 3-line fix adds support for IE 6 and IE 7.

Further reading