Applying vertical-align to two divs using inline-block
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.
Give vertical-align:top to your inline-block elements. Write like this:
Check this http://jsfiddle.net/qxe8h/2/