Why is the inline div block below when it has content?

Question

If you have three identical divs located in a line block, they align perfectly. But if you place any content in any of the div, it falls below the rest. Why is he doing this?

<div class="left">?</div> <div class="center"></div> <div class="right"></div> div { display:inline-block; margin-:2px; height:100px; width:25px; border:1px solid black; }​ 

http://jsfiddle.net/7kkC6/

best example: http://jsfiddle.net/7kkC6/9/

Answer 1

This is because vertical-align is set to the baseline by default. You can fix your problem by setting it on top:

 div { display:inline-block; margin-:2px; height:100px; width:25px; border:1px solid black; vertical-align: top; }​ 

Demo here: http://jsfiddle.net/7kkC6/4/

Answer 2

It works if you change display to block and add float:left;

Working example.

Answer 3

To understand the fact that you can read Collapse fields between adjacent elements and more on SO but you can fix this by adding float:left; and hoping you already know that.

Fixed example .