Question

I have three divs that are side-by-side using display:inline-block.

If the divs are empty, they are at the same horizontal level.

As soon as I add <p> tags and some line breaks (<br/>) to the leftmost/first div, the rest are moved down.

If I put enough content in the second box, the third is moved down even more.

My HTML for the boxes:

<div class="main-box" id="about">
    <h1>About</h1>
    <p>This box has one paragraph of text, with line breaks</p>
</div>

<div id="login-container">
    <div class="main-box" id="login">
        <h1>Login</h1>
        <p>Already a member? Sign in and see your stuff!</p>
    </div>
    <div class="main-box" id="signup">
        <h1>Signup</h1>
        <p>Create an account by filling out this form.</p>
    </div>
</div>

The last two boxes are grouped in a div so that they “float” together.

My CSS:

div.main-box {
    text-align: left;
    display: inline-block;
    border: 10px solid red;
    margin: 20px;
    padding: 25px;
    border-radius: 50px;
    width: 400px;
    height: 400px;
}
div#login-container {
    display: inline-block;
}

Answer 1

Just add:

 vertical-align: top;

You can read about inline-block and some more details like IE7 fix and spacing in html code here.