Static Positioned Divs Not Floating At Top Of Parent? - html

Question

I have 3 divs with content in them, and the 2 with less content are flush with the bottom of the larger div.
There's no margin or padding, so I'm not sure why is this happening?
body {
width: 100%
}
.container {
margin: 0 auto;
text-align: center;
}
.box {
display: inline-block;
width: 25%;
height: 100%;
border: 3px solid black;
padding: 2%;
}
<div class="container">
<div class="box blue">
<h1>Box 1</h1>
<p>Blub</p>
<div class="remainder"></div>
</div>
<div class="box green">
<h1>Box 2</h1>
<p>I'm working on different ideas for 100% height without using Flexbox, Tables, or a set height on the parent container.</p>
<hr />
<p>That's not my question though, why are boxes 1 & 2 floating so far down?</p>
</div>
<div class="box yellow">
<h1>Box 3</h1>
<p>Here's some more content</p>
<div class="remainder"></div>
</div>
</div>

Answer 1

It is because of the vertical-align property on the .box class is set to bottom. Setting elements to be inline-block will allow the vertical align property to affect their positioning.
Just a note: you didn't set the vertical align property yourself, but it is inheriting it from another rule. Try setting it directly to see the different results.
.box {
vertical-align: top;
/* ... */
}

Answer 2

Since they are inline-level elements, their vertical alignment is given by the vertical-align property.
.box {
vertical-align: /* value */;
}
Some examples:
vertical-align: top
body {
width: 100%
}
.container {
margin: 0 auto;
text-align: center;
}
.box {
display: inline-block;
width: 25%;
height: 100%;
border: 3px solid black;
padding: 2%;
vertical-align: top;
}
<div class="container">
<div class="box blue">
<h1>Box 1</h1>
<p>Blub</p>
<div class="remainder"></div>
</div>
<div class="box green">
<h1>Box 2</h1>
<p>I'm working on different ideas for 100% height without using Flexbox, Tables, or a set height on the parent container.</p>
<hr />
<p>That's not my question though, why are boxes 1 & 2 floating so far down?</p>
</div>
<div class="box yellow">
<h1>Box 3</h1>
<p>Here's some more content</p>
<div class="remainder"></div>
</div>
</div>
vertical-align: middle
body {
width: 100%
}
.container {
margin: 0 auto;
text-align: center;
}
.box {
display: inline-block;
width: 25%;
height: 100%;
border: 3px solid black;
padding: 2%;
vertical-align: middle;
}
<div class="container">
<div class="box blue">
<h1>Box 1</h1>
<p>Blub</p>
<div class="remainder"></div>
</div>
<div class="box green">
<h1>Box 2</h1>
<p>I'm working on different ideas for 100% height without using Flexbox, Tables, or a set height on the parent container.</p>
<hr />
<p>That's not my question though, why are boxes 1 & 2 floating so far down?</p>
</div>
<div class="box yellow">
<h1>Box 3</h1>
<p>Here's some more content</p>
<div class="remainder"></div>
</div>
</div>
vertical-align: bottom
body {
width: 100%
}
.container {
margin: 0 auto;
text-align: center;
}
.box {
display: inline-block;
width: 25%;
height: 100%;
border: 3px solid black;
padding: 2%;
vertical-align: bottom;
}
<div class="container">
<div class="box blue">
<h1>Box 1</h1>
<p>Blub</p>
<div class="remainder"></div>
</div>
<div class="box green">
<h1>Box 2</h1>
<p>I'm working on different ideas for 100% height without using Flexbox, Tables, or a set height on the parent container.</p>
<hr />
<p>That's not my question though, why are boxes 1 & 2 floating so far down?</p>
</div>
<div class="box yellow">
<h1>Box 3</h1>
<p>Here's some more content</p>
<div class="remainder"></div>
</div>
</div>