CODEWITHSUNDEEP
css
Ryan Gill
Ryan Gill

Reputation: 1758

Why does this div shift down when content is added?

I have a 5x5 grid and when i add content to the div, it is shifted down. Can anyone explain why this is happening?

enter image description here

codepen example: Risk Matrix

Upvotes: 9

Views: 3072

Answers (3)

Cam
Cam

Reputation: 1902

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.

Upvotes: 12

Jasper
Jasper

Reputation: 75993

Setting overflow:hidden on the <div /> elements should fix it as it will make the elements ignore any margin or padding that inner-nodes create that overflow the containing element.

Here is a demo: http://codepen.io/anon/pen/mDonw

Upvotes: 1

psdpainter
psdpainter

Reputation: 666

If you set: 

.r5, .r4, .r3, .r2, .r1 {
  margin-left: 40px;
  > div {
    display: inline-block;
    vertical-align: top; <-- this
    width: 50px;
    height: 50px;
    border: 1px solid black;
    line-height: 50px;
    text-align: center;
  }
}

It aligns properly.

Upvotes: 2

Related Questions