float left div with text shift it down

Question

I am learning css and have a query . When I float left divs then they sit well at a straight horizontal line but having some text inside any of them move it moves it vertically .I googled but not able to find a good explanation. Please help me understand why it is happening.

div#red {
  width: 100px;
  height: 100px;
  border: 1px solid red;
}
div#blue {
  width: 25px;
  height: 25px;
  border: 1px solid blue;
}
div#green {
  width: 50px;
  height: 50px;
  border: 1px solid green;
}
.box {
  display: inline-block;
}

<div class="box" id="red">

</div>
<div class="box" id="blue">
  Tri
</div>
<div class="box" id="green">

</div>

Why did you make them `inline-blocks`? – Marty Oct 01 '15 at 03:25 — Marty, Oct 01 '15 at 03:25
Just to make them bottom aligned. – Triven Oct 01 '15 at 03:31 — Triven, Oct 01 '15 at 03:31

score 1 · Answer 1 · answered Oct 01 '15 at 03:33

You can add vertical-align: bottom to .box:

div#red {
  width: 100px;
  height: 100px;
  border: 1px solid red;
}
div#blue {
  width: 25px;
  height: 25px;
  border: 1px solid blue;
}
div#green {
  width: 50px;
  height: 50px;
  border: 1px solid green;
}
.box {
  display: inline-block;
  vertical-align: bottom;
}

<div class="box" id="red">

</div>
<div class="box" id="blue">
  Tri
</div>
<div class="box" id="green">

</div>

float left div with text shift it down

1 Answers1