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.

Answer 2

Going to add on to zachstarnes's answer.

The problem is that the vertical-align by default is set to baseline.

Align the baseline of the element with the baseline of the parent element. This is default

Since the other divs are empty, their baseline default to the bottom of the div. Notice if as you fill in text they will all start to shift down until they all have content in them.

Depending on how you want the divs to line up with each other change the vertical-align property to something other baseline.

---

Answer 3

Give position to your p tag. Problem will be solved.

#square1 p {
      position:absolute;
      width: 100%;
      text-align: center;
}

Working Fiddle

Answer 4

Using this solves the problem:

#square1 {
    overflow: auto;
}

Answer 5

Reason why this happens, it happens for inline-block elements :

In a inline-level (inline-block) you have to specify the vertical alignment of text. So in essence, without setting where the vertical alignment is, the content is placed in its default place which is baseline. This is why your text offsetted your layout.

Answer 6

use word-wrap property

div[id^="square"]{
  word-wrap: break-word;
}

You can specify either normal or break-word value with the word-wrap property. Normal means the text will extend the boundaries of the box. Break-word means the text will wrap to next line.