Why Does This Div Shift Down When Content Is Added

Stop div from shifting down when text is added

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

Why does this div shift down when content is added?

You need to add this to vertical-align: top and margin-top: 3px;

.r5 > div, .r4 > div, .r3 > div, .r2 > div, .r1 > div {
    border: 1px solid #000000;
    display: inline-block;
    height: 50px;
    line-height: 50px;
    margin: 4px 0 0;
    text-align: center;
    vertical-align: top;
    width: 50px;
}

I believe its because content pushes the dom out of empty space.

HERE is the answer why this happends.

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 content is placed in its default which is baseline. This is why your text offsetted your layout.

Div position shifts when adding content

Add vertical-align: top to these div's:

.rowSample > div {
    background: none repeat scroll 0 0 black;
    border: 1px solid yellow;
    color: white;
    display: inline-block;
    height: 50px;
    vertical-align: top;
    width: 50px;
}

Because these are elements with display:inline-block they are aligned as inline elements but have explicit dimensions. For example, <img> tags by default have inline-block display mode, so to align them inside text you have to specify a desired vertical-align property.

Please take a look at the example fiddle: http://jsfiddle.net/a6Hu2/

Why does my div move down when I add paragraph?

The <p> tag has margins by default. So try resetting them:

p {margin: 0;}
.titleheader {overflow: hidden;}

Working Output: http://jsbin.com/zohapoyivi/1/edit?html,output

Why does this DIV move HTML content down?

If I understand correctly you want DIV to appear on top of the rest of the content, being completely independent of the rest of your site. To do that you need to set position: absolute rather than position: relative. relative basically allows moving element from its original position, but the space that element was occupying is still there and that's why all the content moved down in your case.

If you apply position: absolute element will be taken out of the flow of the page and the following elements shouldn't move down. But then you might need to make sure that DIV#pop moves in correct context but that's something to worry about later ;)

Hope my explanation makes sense, but you also might find this this link useful

What causes div to move down?

inline-block default value for vertical-align in CSS is baseline. You need to set the vertical-align property to fix that.

.b
{
  background-color: gray;
  display:inline-block;
  border: 1px solid #ccc;
  vertical-align:top;
}

DEMO

DIV moves when I put text in it

Adding the text creates a baseline for the #parentwrap div, so the div gets aligned to that. Without the text, there's no baseline so the div takes a fallback layout mode.

To fix, set add #parentwrap { vertical-align:top; }

Div position changed when text is added

Set overflow: hidden; to your divs.

Example:

#middle {
    overflow: hidden;
    width: 625px;
    height: 1065px;
    background-color: #ececec;
    border: 1px solid #636363;
    margin: 7px 0px 0px 15px;
    display: inline-block;
}

You may also set it to overflow: auto if you want the container to be scrollable if the text reaches the bottom.

Another, more common approach is to use CSS's float.

You could then style your div's like this:

div {
    float: left;
    width: 625px;
    height: 1065px;
    background-color: #ececec;
    border: 1px solid #636363;
    margin: 7px 0px 0px 15px;
}

and the HTML:

<div>Content</div>
<div>Content</div>
<div>Content</div>

See an example fiddle here.

---

Related Topics