Menu
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.
201
To align the div content to the bottom, use position: relative to the container class and position: absolute to the div element.
Like last time, you must know the width and height of the element you want to center. Set the position property of the parent element to relative . Then set the child's position property to absolute , top to 50% , and left to 50% . This just centers the top left corner of the child element vertically and horizontally.
If you want the two div s to be displayed one above the other, the simplest answer is to remove the float: left; from the css declaration, as this causes them to collapse to the size of their contents (or the css defined size), and, well float up against each other.
You can use the following styles for the container
display: table-cell;
vertical-align: bottom;
Solution demo here.
185
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
