Question

I have no idea why, and this seems illogical, but for some reason the text in one div affects the position of another. The difference in the number of lines the text takes up offsets the height of a div with fewer lines. These divs are side-by-side inline boxes, so it really shouldn’t do that period. Not only that, but they have fixed dimensions. I have no clue why this is happening but it ruins my design. Here’s the code, stripped down to the problem without anything else in it.

<div class="box">
<div class="main">
    <br><i>"Message"</i>
</div>
</div>
<div class="box">
<div class="main">
    <br><i>"Message that is longer than the other message."</i>
</div>
</div>
<style>
table {
    width:100%;
    }
div.box {
    background:#ccc;
    border:1px solid #000;
    display:inline-block;
    height:100px;
    padding:4px;
    margin:4px;
    width:100px;
    }
</style>

My browser is Google Chrome, latest release.

Answer 1

You need to add vertical-align: top to div.box.

Demo without: http://jsfiddle.net/ucE8r/
Demo with: http://jsfiddle.net/ucE8r/1/

See here:

• http://www.brunildo.org/test/inline-block.html
• http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/