HTML image bottom alignment inside DIV container

Question

I have a div tag with a fixed height. Most of the images have the same height and width.

I want to align the images at the bottom of the div so that they are nicely arranged. Here is what I have so far:

<div id="randomContainer">     <div id="imageContainer">         <img src="1.png" alt=""/>         <img src="2.png" alt=""/>         <img src="3.png" alt=""/>         <img src="4.png" alt=""/>     </div>     <div id="navigationContainer">         <!-- navigation stuff -->     </div> </div> 

The CSS looks like:

div#imageContainer {     height: 160px;       vertical-align: bottom;     display: table-cell; } 

I managed to align the images at the bottom with display: table-cell and the vertical-align: bottom css attributes.

Is there a cleaner way as displaying the div as table-cell and aligning the images at the bottom of the DIV tag?

Answer 1

Set the parent div as position:relative and the inner element to position:absolute; bottom:0