title: HTML image bottom alignment inside DIV container
body: <p>I have a div tag with a fixed height.  Most of the images have the same height and width.</p>
  
  <p>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:</p>
  
  <pre><code>&lt;div id="randomContainer"&gt;
      &lt;div id="imageContainer"&gt;
          &lt;img src="1.png" alt=""/&gt;
          &lt;img src="2.png" alt=""/&gt;
          &lt;img src="3.png" alt=""/&gt;
          &lt;img src="4.png" alt=""/&gt;
      &lt;/div&gt;
      &lt;div id="navigationContainer"&gt;
          &lt;!-- navigation stuff --&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS looks like:</p>
  
  <pre><code>div#imageContainer {
      height: 160px;  
      vertical-align: bottom;
      display: table-cell;
  }
  </code></pre>
  
  <p>I managed to align the images at the bottom with <code>display: table-cell</code> and the <code>vertical-align: bottom</code> css attributes.  </p>
  
  <p>Is there a cleaner way as displaying the div as table-cell and aligning the images at the bottom of the DIV tag?</p>