Side-by-side blocks using CSS

Question

I want to have block elements side-by-side. I don't don't want to use left, right, top , or anything similar.

HTML

<div class="iLB">LOLOLOL</div>
<div class="iLB">
    This is content.<br/>
    This is content.<br/>
    This is content.
</div>
<div class="iLB">This, too?</div>

CSS

.iLB {
    display: inline-block;
}

Live demo: jsFiddle

Answer 1

Use vertical-align:top;

.iLB {
    display: inline-block;
    vertical-align: top;
}​

JSFiddle : http://jsfiddle.net/97wDh/1/

Answer 2

As you are using display: inline-block it's actually inline elements. They work just like character boxes, so they are placed side by side on a text line, that's why they line up with their bottom edge at the same height.

You can use float: left instead to make them block elements and place them side by side:

http://jsfiddle.net/97wDh/2/