Question

I have multiple child divs within a parent div. Using CSS, is it possible to vertically align all of the child divs to the bottom of the parent container so that something like the following would be displayed:

The height of the child divs will be unknown (dynamic).

<p>Top of page</p>
<div id="container">
<div class="message">Message 4</div>
<div class="message">Message 3</div>
<div class="message">Message 2</div>
<div class="message">Message 1</div>
</div>
<p>Bottom of page</p>

style below:

#container {

    height: 500px;

    }

Problem demo.

Answer 1

You can use the following styles for the container

display: table-cell;
vertical-align: bottom;

Solution demo here.