The curious case of inline-block, min-height and vertical-align

I was struggling with a dynamic number of boxes that I wanted centered in a <div> recently. I’d tried floating but it was just getting messy, that is until my great friend Jon Reed suggest I used display: inline-block;

I’d heard of this new-fangled, oft forgotten CSS before, but never really used it. Floats had always sufficed for what I needed. It’s safe to say, however, that it solved my problem and is supported widely enough for me to not have to worry about¬†compatibility¬†where I currently work. There was a slight problem with the solution that took me a while to solve however.

If you need to know more about inline-block, then check the site here, it’s a good overview (even if it’s a little over the top on the “drawback” of whitespace, anyway…). So, my problem was that when I’d finished adding the markup and CSS, the page looked like this:

I figured it was a whitespace problem, so I removed all the whitespace (which left the markup looking like shite), but that didn’t work either. The boxes that were displaying had already been created by another dev, so I went and had a look at the CSS to see if there was anything else there that might have caused the problem.

The only thing that wasn’t a border or background color was min-height: 147px; when I removed this, the boxes aligned themselves like so:

Ahah! So, with vertical-align: bottom and a min-height: set, it seems like inline-block will align to the bottom of the element content. Easily fixed, I put the min-height back and set the vertical-align to top, et voila:

And my problem is solved. I thought I would blog about it, just in case anyone else runs up against this problem. None of this is scientifically tested or particularly well researched, but, well, it works!

5 thoughts on “The curious case of inline-block, min-height and vertical-align

  1. I was facing the same problem, which appeared only in Chrome; Firefox was fine. The “vertical-align:bottom” fixed the issue. Many thanks.

  2. You saved the day. After using a plugin that didn’t have horizontal listing implemented (yet), I had to modify it on my own. God bless you man.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s