Mike Pearce – blog

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!