Display inline-block: Another Way to Position

I've recently been using the CSS declaration 'display: inline-block' on a number of sites, so thought I'd talk a little bit about positioning elements in this way.

Up until a year or two ago, inline-block wasn't particularly useful because cross-browser support was quite patchy. However as newer versions of browsers have been released that's starting to improve, and as we'll see below, by combining inline-block with the vertical-align property you can create some interesting layouts which would be diffcult to achieve using a different positioning method.

Firstly, here's a bit of an outline of how the technique works. Imagine you wanted to position the following three div elements horizontally next to one another:

	

	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante sem, facilisis non,
	


	

	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante sem,  sed facilisis
	


	

	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante sem, am pharetra,
	

Normally I'd use 'floats' to position these elements as follows:

div {
	float: left;
	width: 100px;
	margin-right: 20px;
	padding: 20px;
	border: 1px solid #F0F0F0;
	background: #F8F8F8;
}

Which would produce the following:

Not too bad, but what I haven't mentioned is the impact floated elements have on their neighboring and parent elements - and of course the problems that can occur in different browsers if these additional elements aren't handled correctly.

So, whilst it can be good to use floats in some situations, an alternative may be to use display: inline-block as follows:

div {
	display: inline-block;
	width: 100px;
	margin-right: 20px;
	padding: 20px;
	border: 1px solid #F0F0F0;
	background: #F8F8F8;
} 

Interestingly, the boxes are aligned to the bottom by default, as we can see with some extra content:

We can easily change that by adding the vertical-align property:

div {
	display: inline-block;
	width: 100px;
	margin-right: 20px;
	padding: 20px;
	border: 1px solid #F0F0F0;
	background: #F8F8F8;
	vertical-align: top;
}

Or 

div {
	display: inline-block;
	width: 100px;
	margin-right: 20px;
	padding: 20px;
	border: 1px solid #F0F0F0;
	background: #F8F8F8;
	vertical-align: middle;
} 

Pretty neat huh?

Now for the Drawbacks

The more eagle eyed of you may have noticed the there's a few extra pixels of white space between the boxes in the inline-block examples than in the first 'floated' example. I won't go into too much detail here, but inline-block appears to be whitespace sensitive. If you're curious there's some good articles and potential workarounds at CSS Squirrel.

Whilst browser support for inline-block is now quite good, with support in Internet Explorer 8, Firefox 3+, Safari (win) 3+, Chrome and Opera 9+ there's still a couple of browsers we'll need to cater for. 

Unfortunately, IE6 and 7 don't support inline-block. But thankfully fixing it for those browsers is pretty straightforward.  We can use display-inline to achieve the same result as follows:

div {
	display: inline-block;
	width: 100px;
	margin-right: 20px;
	padding: 20px;
	border: 1px solid #F0F0F0;
	background: #F8F8F8;
	vertical-align: top;
}
/*IE 6*/
*html div {
	display: inline;
}
/*IE 7*/
:first-child+html div {
	display: inline;
}  

Note that I've used CSS hacks above for readability. However you may prefer to move these IE styles to separate stylesheets and include them using conditional comments as described on Quirksmode so as not to invalidate your CSS.

Another browser lacking inline-block support is Firefox 2. To get it work in Firefox 2 we can add a custom display: -moz-inline-stack declaration before our inline-block.

div {
	display: -moz-inline-stack;
	display: inline-block;
	width: 100px;
	margin-right: 20px;
	padding: 20px;
	border: 1px solid #F0F0F0;
	background: #F8F8F8;
	vertical-align: top;
} 

This -moz-inline-stack approach can cause problems with certain elements as described in this article on the Mozilla Blog which you may want to take a look at if you're having some problems getting the above to work.

Like everything in CSS, the implimentation of inline-block isn't perfect, but it could prove helpful if you're needing to position elements and don't won't to use floats.