What causes div to move down? - html

Question

FIDDLE
.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?

Answer 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

Answer 2

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.

Answer 3

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

Answer 4

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;
}

Answer 5

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.