Should You Use Inline-Blocks As A Substitute For Floats?

When it comes to developing a site layout with css, floats do most of the heavy lifting. We use them for the big blocks like our main content and sidebar and we use them for the smaller blocks inside these big ones. Are floats always the answer?

They generally work well, but sometimes they can be hard to work with. This is especially true when it comes to inside blocks like a grid of images that won’t line up as expected. Inline-blocks are another option we can use. They mimic some of the behaviors of floats that we want, while not holding some of the issues we don’t.
Inline-blocks aren’t anything new and it’s quite possible you’re already using them. I haven’t until recently. The last few sites I’ve built happened to be for photographers and the sites naturally called for grids of images and I find myself reaching for inline-blocks over floats.

What is an inline-block?

Inline-block is one of the values we can assign to the display property of an element. It gets its name because it has some of the characteristics of inline elements and some of block elements.

• block elements — form boxes according to the css box-model. They have width, height, padding, border, and margin and they stack vertically on top of each other.
• inline elements — don’t form boxes. They sit horizontally next to each other.
• inline-block elements — act like block elements on the inside where they form boxes. On the outside they act like inline elements sitting horizontally next to each other instead of stacking on top of each other.

If you think about it, that’s not too far off from how a floated elements behaves. Floats form boxes, but they also sit next to each other instead of stacking vertically. They aren’t exactly the same of course, but the inline on the outside and block on the inside characteristics are sometimes all we really want and either a float or an inline-block might be appropriate.

The Difference Between Floats and Inline-Blocks

While floats and inline-blocks share some characteristics, there are some clear differences between the two.

• Document flow — Floats are removed from the normal document flow allowing other elements to flow around them. Inline-blocks stay in the document flow. They don’t need to be cleared so no clearfix solutions or overflow: hidden. Of course other elements can’t flow around them and you can’t force an element below an inline-block by clearing it.
• Horizontal position — An obvious case of this is floats can’t be centered by setting text-align: center on the parent element. In fact no positioning style you place on the parent will affect a floated element. The inline part of inline-blocks lets their parent affect their position.
• Vertical alignment — inline-blocks align on the baseline by default. Floats align at the top. You can change the default and control where inline-blocks are vertically aligned. You can’t do this with floats. This has been the main reason I’ve been using inline-blocks more, which I’ll get to in a bit.
• Whitespace — inline-blocks pick up html whitespace. If you have several inline-block elements each on a new line in your html they’ll display with a horizontal space between them. Floated elements will sit adjacent to each other, regardless of the html whitespace between them.
• IE6 and IE7 — inline-blocks aren’t supported or only have partial support in IE6 and IE7. If you need to support those browsers you need to find a workaround. Probably not a big issue at this point, but worth mentioning.

All the blocks above are set to display: inline. On the left there is whitespace between them in the code. On the right the html whitespace has been removed. That’s the only difference.

Solving the Whitespace issue

It’s possible, even likely you’ll want to use inline-blocks at times, but don’t want the horizontal space between them. There are a few methods for removing it.

• Remove the html whitespace — Get rid of the new line character between elements in some way. Not always an elegant solution, but one that works, especially if you only have a few elements.
• Use negative margins — You can set a negative margin equal to the space.You’ll have to adjust for the font-size as the space is based on that size. I want to say it’s 0.25em, but I’m not entirely sure. If anyone knows please leave a comment.
• Set a font-size of 0 on the parent — No matter what size the space, a font-size of 0 means the space would also be equal to 0. Naturally you’d need to reset the size for any children that need to have a font-size.

Wooden blocks floating in a bathtub

When To Use Inline-Blocks and When To Use Floats?

When to use either depends on the specifics of your design and what you’re trying to accomplish. If you need text to flow around an element then a float is the obvious answer. If you need to center the element, inline-block is the better option.
Your choice will ultimately come down to the differences between floats and inline-blocks and which characteristics of each you need.

• Use inline-blocks — when you need more control over the vertical alignment or horizontal positioning of elements.
• Use floats — when you need other elements to flow around an element, support older versions of IE, or don’t want to deal with the horizontal whitespace issue.

The blocks above have been floated left to create a grid. Block 5 gets trapped behind block 2 because block 2 has the greatest height in its row. This is a common issue when creating a grid of images.

Floats, Inline-Blocks, and Image Grids

In my case the use of inline-blocks is to help with the vertical alignment issue. I think this is the same for many people who’ve started using them. I’ve built several sites for photographers of late and naturally those sites inevitably have grids of images all over the place.
Floats work well if all the images in the grid are the same height. As soon as they aren’t, which is most of the time, floats get hung up behind whichever image in a row is tallest. This is because they are removed from the normal document flow.
Inline-blocks don’t have this issue, since they remain in the document flow. When it’s time for a new row of images they automatically clear the entire row above. In order to have the floated elements clear we’d need to specifically know which element needs to be cleared, which causes problems when things are created dynamically.
Using inline-blocks will typically make more sense here.
I’ve built a simple demo to illustrate the issue above and the different results when using floats and inline-blocks.

The blocks above have been set to display as inline-blocks. Since they aren’t removed from the document flow, no block gets trapped behind another in the row above.

Inline-Blocks in Navigation

Another potential place you might choose inline-block is in horizontal navigation bars. We typically float the links and then set them as block level elements. I also find myself setting the list-items inline. If there’s a lot of switching inline and block values to work with floats, maybe a better solution is to use inline-blocks instead.
Any place you want elements in a row or over several rows you might want to consider using inline-blocks as opposed to floats. Of course, a table will also work in these circumstances. They are for aligning things in rows and columns after all.
If you’re building something more complex with rows and columns then a table (whether html or css) might be your best option, but when it’s something simple think of inline-blocks.

Summary

We make great use of floats in our layouts, but are they always the tool we should reach for? Sometimes inline-blocks will be the better choice, especially if your goal is to lay out blocks in rows, like a grid of images or a horizontal list of links.
Inline-block elements take on the characteristics of inline elements from the outside and block level elements on the inside. This makes them very similar to floated elements, with a few key differences.
These differences are what will suggest which is more appropriate to use. If you’re having an issue with vertical alignment or horizontal position, you probably want to use an inline-block. If you need more control over a single element and how other elements react to it, you probably want a float.
And of course, a table (html or css) might end up being your best option depending on what you’re trying to accomplish.