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!

About these ads

5 comments

  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:

WordPress.com Logo

You are commenting using your WordPress.com 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