Stop div from shifting down when text is added

Question

I am trying to place some text inside a square div. The only problem is that it shifts the div that the text is in down a lot. Does anyone know how I can get the div back to its original position?

Here is the html:

<div id="squarecontainer">
    <div id="square1">
        <p>Easy to Manage</p>
    </div>
    <div id="square2">

    </div>
    <div id="square3">

    </div>
</div>

Here is the css:

#squarecontainer{
    text-align: center;
}

#square1{
    display: inline-block;
    position: relative;
    margin-right: 100px;
    height: 310px;
    width: 310px;
    margin-top: 72px;
    background-color: #fff;
}

#square2{
    display: inline-block;
    position: relative;
    height: 310px;
    width: 310px;
    margin-top: 72px;
    background-color: #fff;
}

#square3{
    display: inline-block;
    position: relative;
    margin-left: 100px;
    height: 310px;
    width: 310px;
    margin-top: 72px;
    background-color: #fff;
}

#square1 is the div that shifts really far down when I added the "Easy to Manage" text.

Fiddle link demonstrating the problem: http://jsfiddle.net/jhunlio/RgywE/

Answer 1

I found the solution. By adding vertical-align: top; it moved the div back. don't know why it worked, but it did.