CSS Sideblocks

Question

I want to have blocked items side by side. I do not want to use left, right, top or something like that.

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

Since you are using display: inline-block , these are actually inline elements. They work the same way as boxes with symbols, so they are placed side by side on the text line, so they line up with the bottom edge at the same height.

Instead, you can use float: left to block elements and place them side by side:

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