[Solved] inline-block layout annoyance.

[Jerba]

I’ve always had a bit of an annoyance with using inline-block to create layouts as demonstrated in the cssdeck snippet below. I’m sure that the absolute positioning shouldn’t be required I just can’t figure out what’s going wrong.

http://cssdeck.com/labs/m8u61t3l

Pretty much, without content the divs align correctly and fit in their parent container fine, as soon as any content is added it causes the div to drop out of the parent container, however, still containing the content within the parent container (if that makes any sense what so ever)

See how the actual h3 element stays within the parent container but the rest falls below. If i position the h3 element as absolute this problem is fixed, however, surely there’s a way to do this without absolutely positioning the element?

I know this isn’t really a big issue, but I just get a little OCD in regards to it…

Thanks

[Paulie_D]

It sounds like you need to use vertical-align:top…the default for inline-block items is `baseline…but it’s not entirely clear to me what you are trying to do.

[Author]

Posts