HTML image bottom alignment inside DIV container

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?

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

This is your code: http://jsfiddle.net/WSFnX/

Using display: table-cell is fine, provided that you're aware that it won't work in IE6/7. Other than that, it's safe: https://stackoverflow.com/questions/6307934/is-there-a-disadvantage-of-using-displaytable-cellon-divs

To fix the space at the bottom, add vertical-align: bottom to the actual imgs:

http://jsfiddle.net/WSFnX/1/

Removing the space between the images boils down to this: https://stackoverflow.com/questions/6350218/bikeshedding-css3-property-alternative/6351697#6351697

So, here's a demo with the whitespace removed in your HTML: http://jsfiddle.net/WSFnX/4/

Flexboxes can accomplish this by using align-items: flex-end; with display: flex; or display: inline-flex;

div#imageContainer {
    height: 160px;  
    align-items: flex-end;
    display: flex;

    /* This is the default value, so you only need to explicitly set it if it's already being set to something else elsewhere. */
    /*flex-direction: row;*/
}

JSFiddle example

CSS-Tricks has a good guide for flexboxes

<div> with some proportions

div {
  position: relative;
  width: 100%;
  height: 100%;
}

<img>'s with their own proportions

img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: auto; /* to keep proportions */
  height: auto; /* to keep proportions */
  max-width: 100%; /* not to stand out from div */
  max-height: 100%; /* not to stand out from div */
  margin: auto auto 0; /* position to bottom and center */
}