Applying vertical-align to two divs using inline-block

Question

So I have some DIVs. The structure is this

    <div id="content">
        <div id="lcol">some content</div>
        <div id="lcol">some<br />content</div>
    </div>

And my problem is that the two divs are of different height. I'm using display:inline-block for 'lcol' while 'content' is just a regular div. The two lcol divs do indeed show up side by side, but they are anchored at the bottom of the div. I would like them to be aligned to the top of the div. I tried adding vertical-align:top to 'content' but nothing happened.

Any ideas?

JsFiddle: http://jsfiddle.net/qxe8h/1/

Answer 1

Give vertical-align:top to your inline-block elements. Write like this:

#lcol {vertical-align:top;}

Check this http://jsfiddle.net/qxe8h/2/