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.

Any ideas?

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

Answers


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

#lcol {vertical-align:top;}

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


Need Your Help

How to recalculate x,y coordinates based on screensize

javascript jquery coordinates heatmap

I'm have a heat map application and store I store the x,y coordinates of a click and also the viewport width and height. Real data for 2 clicks:

Entity Framework is Too Slow. What are my options?

.net performance entity-framework orm

I have followed the "Don't Optimize Prematurely" mantra and coded up my WCF Service using Entity Framework.