Monday, March 19, 2012

Vertically aligning inline-blocks

As mentioned in my previous entry my three div columns had been set up as inline-blocks with the same IE7 trick as often applied to list items. The list wasn't evenly divisible by three so I sectioned them off in at logical alphabetical intervals with a variable number of items in each column. Saved and displayed the result.

They were staggered. The first column was correctly sitting at the top of its container, but the second column was 1 line down and the third 4 lines down. What was happening? I scrolled down to the bottom and found them all bottom-aligned.

I checked all my code. I checked my CSS. I commented out various sections and even scratch built a bare version of it to test - every time the inline-block was set it would bottom-align. I checked online to see if this was a fault or bug and found various sites on how to align div elements usually using float or absolute; no thank-you.

I pondered; I paced. I asked myself what I was doing in the code and what I wanted to do - I wanted the blocks to align next to each other like inline elements but retain block-type properties... "like inline elements" like text. Text which by default is aligned to the base-line which when done to blocks would make them appear to be aligned to the bottom of a containing element. Groan!

I'd been trying to align them as blocks when I should have been trying to align them as text. One line to add to the columns' CSS:

vertical-align: text-top

Sorted.

3 comments:

Anonymous said...

I've been wanting to know how to do that for years! Thought it wasn't possible, actually.

It should be noted that vertical-align goes on the element to alight, rather than the parent elements, as text-align does.

FlipC said...

Just to clarify I applied it using a class to the div element that contained the text and not to the text itself.

Anyway glad it helped.

Kenneth Christensen said...

Hallelujah! Thank you so much!