What causes div to move down?

Question

.a,.c
{
 width: 100px;
 height: 300px;
 background-color: red;
 display:inline-block;
}  
.b
{
 background-color: gray;
 display:inline-block;
 border: 1px solid;
}
.main
{
 width:100%;
 display:inline-block;
 height: 300px;
}

Why does the div b is at the bottom. Please set height at the fiddle and check. It ll grow down. Does anybody know the reason?

I request anybody to specify the reason for dwwnvoting. Because i dont find any mistakes here. — Gibbs, Aug 06 '14 at 06:44

score 1 · Answer 1 · answered Aug 06 '14 at 06:34

1

Add vertical-align: top; rule to class b or all the classes that have the rule display: inline-block. display: inline-block is by default bottom aligned.

answered Aug 06 '14 at 06:34

Sarbbottam

5,410
4
30
41

Dear Anonymous down voter, would you care to explain the reason behind it? – Sarbbottam Aug 06 '14 at 06:40
Is really display:inine-block place content at the bottom? Any ref? – Gibbs Aug 06 '14 at 06:53

score 1 · Accepted Answer · answered Aug 06 '14 at 06:34

1

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

answered Aug 06 '14 at 06:34

Suresh Ponnukalai

13,820
5
34
54

score 0 · Answer 3 · edited May 23 '17 at 12:11

you can use table-cell instead of inline-block;

.a,.c
{
    width: 100px;
    height: 300px;
    background-color: red;
    display:table-cell;
}
.b
{
    background-color: gray;
    display:table-cell;
    position: relative;
    border: 1px solid;
    vertical-align:middle;
}
.main
{
    width:100%;
    display:table;
    height: 300px;
}

Jsfiddle

inline-block behave as the block level when your browser will be re-sized larger or if your contents exceeds than its width while display: table-cell; won't. You'll also find the gap between block when you apply display: inline-block;

more can be read on this question.

question

score 0 · Answer 4 · answered Aug 06 '14 at 06:40

There are rules in display: in-line block that mess it up in your case. Just change them to float: left as in this jsfiddle

.a,.c
{
width: 100px;
height: 300px;
background-color: red;
float: left;
}

.b
{
background-color: gray;
float: left;
border: 1px solid;
 }

.main
{
width:100%;
float: left;
height: 300px;
}

score 0 · Answer 5 · answered Aug 06 '14 at 06:42

You don't have any contents on first and last divs.

Because all the divs are displayed inline-block the default position will go to baseline. Try adding some contents to the .a and .c divs, you will see different behaviors.

When you are all setup with the contents you need to adjust the vertical-align to have your desired look.

What causes div to move down?

5 Answers5