Why You Should Use Inline-Block when Positioning Elements

Why You Should Use Inline-Block when Positioning Elements

Example

This post will take 3 minutes to read.

I was recently introduced to the idea of using display: inline-block; instead of floats when positioning elements (thanks Justin). At first it was a bit of a shock to the system; I had always used floats, why should I change? But with time, the idea of no longer using floats for layout started to sound pretty good. For instance, it meant I could forget about using a clearfix hack.

After doing some research—and using inline-block in a few projects—I have become a convert. And I’m hoping I can convince you to consider using it too.

Before I get too far into it, I need to be honest with you: inline-block isn’t a magic fix, but as long as you are aware of its quirks, you can work around them. Also, to clarify: I am not asking you to stop using floats altogether. Floats still have their uses, but it would pay to be more mindful when using them. No more using them willy-nilly!

The float property

Floats were originally used for wrapping text, and as such, they can play up when used to align elements. The most well-known issue is that non floated elements don’t recognise floated children. This is due to floated elements being removed from the normal flow of the document.

Another issue (in regards to layout) is that you can’t centrally float an element; you are limited to left or right floats only. And an even lesser known issue is that elements in the flow of the document will collapse their margins with the elements above and below whereas floated elements will not.

Display: inline-block;

Setting an element’s display to inline-block tells browsers to place that element inline, but to treat it as though it were a block level element. This means that we can use inline-block instead of floats to have a series of elements side by side.

An important thing to take note of when using inline-block is that it takes white space into account. What that means is that any white space in your markup will be rendered in the document. Now most of the time this won’t be an issue, but if you need to eliminate it, doing something like this works:

<ul>
    <li></li><!--
 --><li></li><!--
 --><li></li>
</ul>

An alternate solution is to set the font-size of the parent element to zero, and then set the required font-size on the children.

Another thing that you will need to be aware of is the way that inline-block elements are vertically aligned. I generally use vertical-align: top;, but you have a fair bit of flexibility if required. If you don’t want to declare it more than once then you could use this:

* {
    vertical-align: top;
}

Aligning elements that are inline-block

Alright, on to the important stuff. Aligning elements using inline-block is incredibly simple; all you have to do is use text-align on the parent element. This gives you the ability to align elements centrally, to the left, or to the right. Not only that, but you don’t need to define a width to center an element. You can also align elements to the right without the need to reverse their order in the markup.

Since being introduced to inline-block, I have been questioning how I was able to use floats for so long. I have already encountered situations where inline-block allowed me to position an element in a way that I could not using floats. Not only that, but I no longer have to concern myself with weird browser bugs and clearfix hacks. Sure inline-block renders white space, but that is to be expected; browsers render inline-block elements as though they were characters in a sentence. I would much rather work with behaviour I expect than behaviour I don’t.

Browser support

I’m sure you’re not surprised to hear me say that IE6 and 7 have a few issues with inline-block. That being said, if you do need to support them, you can do so by declaring zoom: 1; *display: inline; (The asterisk targets IE6 and 7). Just make sure that the inline value is listed after display: inline-block.

Addendum

There have been a couple of points brought to my attention that are worth mentioning. Firstly, Christian informed me that IE6 and 7 will correctly render elements that are natively inline as inline-block. And secondly, Justin has made the great suggestion of using an IE conditional style sheet instead of using the *display CSS hack.

Tweet this

19 Comments

  1. Pedro Duarte

    Hey man, nicely written!
    I use inline-block quite a bit, but I don’t rely it on it 100%.
    A lot of sites I work on still require full ie7 support and sometimes using float will cause less of a headache.

  2. Joshua Hibbert

    Thanks Pedro. I wanted to make clear that it’s a viable option. I’m sure there are many out there that only use floats.

  3. Christian

    I’ve been using inline-block for a while for navigation systems. I love your two proposed solutions for the white space issue, especially the CSS only (font-size: 0) one. One thing that might be worth mentioning is that IE fully supports inline-block on native inline elements but not on native block level elements, so the CSS fix you’ve shown is only needed on native block level elements.

    Good stuff :)

  4. Joshua Hibbert

    That’s a great point regarding IE correctly displaying naturally inline elements as inline-block. I’ll add it to the post, thanks Christian!

  5. gentlemedia

    I do use inline-block more often these days too where I would have used floats before. To take care of the whitespaceI I use a negative letter-spacing on the parent and set the letter-spacing on the element with inline-block to normal. It does do the job, but the value of the negative letter-spacing depends on the font you use, so it is quite tricky. I don’t like the solution with the mark-up. I believe you can also solve it with putting everything on one line thus with no spaces and line-breaks. Never thought about setting the font-size to 0. Will have an experiment with that myself.

    Thanks!

  6. Josh Humble

    Thanks for this, Joshua. I’m also one for floats on the majority of elements, and I’m now playing more with the inline-block display property. Interesting it takes white space into account. I would suggest negative margins, but that’s very inaccurate. Like the white space commenting out approach.

  7. MikeyO

    This has certainly given me something to think about. I’ve been using clearing divs at the end of my floating elements parent but have been looking for a new way. I’ve read about the overflow:hidden solution and various clearfix hacks but this has intrigued me most of all. I think I’ll give it a go on my next project, thanks!

  8. Dinesh Khairate

    Thanks! A very good read. I use inline-block for my navigation regularly. Now will try to get used to not using floats for my layout as well.

  9. Aaron Jensen

    How would you handle left aligning the first two elements but right aligning the last? Is that possible without floats?

  10. Joshua Hibbert

    You could use inline-block to align the elements side by side, and then float the last element to the right. I’m not saying stop using floats altogether; just recommending that you think about when you should use them.

  11. Joshua Hibbert

    That’s a very handy technique, but unfortunately won’t do exactly what you are after (i.e. the second element would be centered rather than left aligned). Thanks for the link!

  12. Aaron Jensen

    Well, it would if I put the first two elements in their own list. For my use case I ended up using separate elements and affixing them to my grid, then using text align to align the right ones right. Worked out just fine, but requires a grid or some other fixed width & separate elements (which they are in my opinion)

  13. Hugo Giraudel

    I’m starting to use display:inline-block when I think it may help me, even if it’s pretty uncommun I must say.
    But I feel a little bit like it’s even more hacky to use inline-blocks than floats when it comes to layout tricks because, as you said, “browsers render inline-block ele­ments as though they were char­ac­ters in a sen­tence”.
    However, and I think we agree on that, none of both are made for complex layouts. We’re just working around while display:flex is coming. ;)

  14. Mister Siren

    This article had exactly the illuminating content I needed but I was left wanting for practical examples. Perhaps you might consider replacing the header image for this post with a live-example, especially for us greenhorns who pick through source code for discovery and inspiration.

    Cheers

    -Mister Siren

  15. Josh

    Mister Siren, I have included an example at the start of the article. Thanks for the tip!