13

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/

user1757120
  • 323
  • 2
  • 13

1 Answers1

42

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/

wakooka
  • 1,398
  • 10
  • 15