CSS Inline-block is a great CSS property that enables grid-like designs without all the hacks of using tables. This property, however, is not cross-browser friendly. A quick search can provide a ton of information regarding the typical support for this property. For now, here’s a cool workaround that works with most a-grade browsers using descending definitions:

Use a class, like .iblock, to apply the following css styles to the elements you need to be inline-block. Please note, this does not validate because it uses proprietary browser definitions.

<style type="text/css">

.iblock {
	display: -moz-inline-stack;
	display: -moz-inline-box; /* https://developer.mozilla.org/en/CSS/display */ 
	display:inline-block; 
	zoom:1; 
	*display:inline;
	/* Alignment Fix */
	vertical-align:top;
}

a {
	width:50px; 
	margin-right:12px; 
	background:lightblue; 
	margin-bottom:12px;
}
</style>

<a href="#" class="iblock">Inline Block</a>
<a href="#" class="iblock">Inline Block</a>
<a href="#" class="iblock">Inline Block <br />With Two lines</a>
<a href="#" class="iblock">Inline Block</a>
<br />
<a href="#" class="iblock">Inline Block</a>
<a href="#" class="iblock">Inline Block</a>
<a href="#" class="iblock">Inline Block <br />With Two lines</a>
<a href="#" class="iblock">Inline Block</a>