Why does an inline-block div get positioned lower when it has content?
css
Solution
This is because vertical-align is by default set to baseline. You can fix your problem by setting it to top :
div {
display:inline-block;
margin-:2px;
height:100px;
width:25px;
border:1px solid black;
vertical-align: top;
}
The demo here : http://jsfiddle.net/7kkC6/4/
Problem
If you have three identical divs positioned inline-block they are aligned perfectly. But if you put any content in any of the divs it drops down below the others. Why does it do that? ``` <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/ better example: http://jsfiddle.net/7kkC6/9/