CODEWITHSUNDEEP
htmlcss
Zach Starnes
Zach Starnes

Reputation: 3198

Stop div from shifting down when text is added

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/

Upvotes: 9

Views: 17456

Answers (6)

Shivansh Jagga
Shivansh Jagga

Reputation: 1861

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.

Upvotes: 3

Dark Rebellion
Dark Rebellion

Reputation: 237

Using this solves the problem:

#square1 {
    overflow: auto;
}

Upvotes: 2

Zach Starnes
Zach Starnes

Reputation: 3198

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

Upvotes: 21

thgaskell
thgaskell

Reputation: 13226

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.

vertical-align: baseline

Upvotes: 16

Mr_Green
Mr_Green

Reputation: 41832

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

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

Working Fiddle

Upvotes: 3

Sahil Popli
Sahil Popli

Reputation: 1995

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.

Upvotes: 1

Related Questions