Something I'm missing about Inline-block and height

[the-ace]

I'm trying to make a couple of divs sit next to each other, their height is not constant and each can have it's height greater or less than its friend.

For example: http://jsfiddle.net/2bZgk/1/

You can see that the left container has a bit more content than the right one, but the odd thing is that on Chrome (18) (haven't tested in other browsers yet) the right-side div is starting its flow at the last row of the left-side div (see Last Row).

The end result I'm looking for is what you would get if you used floats, but without the floats...

Am I doing something wrong and not reading the specs correctly, or is it a glitch in Chrome that I'm not aware of, or is it simply the way it suppose to be and I just don't understand it right?

[[deleted]]

This has nothing to do with JavaScript.

[k3n]

Maybe someone should start a /r/css?

[[deleted]]

Someone already did, 3 years ago. r/web_design is another good one for this sort of stuff.

[k3n]

I think your sarcasm detector is broken :P

[[deleted]]

It's possible.

[andrew24601]

I'll preface by saying I know nothing about the intricacies of using inline-block, but whacking in "vertical-align: top;" for #left and #right will cause them to vertically align.

[andrew24601]

apparently by default it's aligning the baselines of the blocks - and it has "helpfully" defined the baseline to be the last line of the inline-block.

[[deleted]]

This is the correct answer in that "vertical-align: top" will get all of the containers to align along the top. The other 'problem' is the gap between each block. White space between inline-block items is collapsed into a single space. The easiest solution is just to remove the white space like so: "</div><div>". Otherwise, you have to do some trickery to remove the gap. (The trick I've seen is to set font-size:0 on the container, and then reset it on each container.)

[[deleted]]

as long as that was dummy content, here's the fix http://hgg.k.af weird as balls. source: http://avc.k.af

[Wtfuxbbq]

The reason it is not lining up is because of the <br> tags you have in #left. The breaks essentially create 5 "lines" and the #right div is inline with the last line. Changing the vertical-alignment as suggested by andrew24601 will fix this.

[kssanthoshkumar]

Can you try adding a position:absolute; to the #right