title: Align divs to the bottom of anothe div
body: <p>I have some divs floating inside another one and I want to align them to the bottom. 
  This is the HTML:</p>
  
  <pre><code>&lt;div class="magazinebookcase"&gt;        
  
      &lt;div class="books"&gt;
      &lt;a title="Mag1" style="height:286px;width:16px;" href=""&gt;
      &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="books"&gt;
      &lt;a title="Mag2" style="height:258px;width:48px;" href=""&gt;
      &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="books"&gt;
      &lt;a title="Mag3" style="height:252px;width:38px;" href=""&gt;
      &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="books"&gt;
      &lt;a title="Mag4" style="height:258px;width:50px;" href=""&gt;
      &lt;/a&gt;
      &lt;/div&gt;       
      &lt;div class="books"&gt;
      &lt;a title="Mag5" style="height:284px;width:14px;" href=""&gt;
      &lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div class="clearfix"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>.magazinebookcase {
  width: 100%;
  padding: 3px;
  vertical-align:bottom;
  
  } 
  
  .magazinebookcase .clearfix {
  clear:both;
  }
  
  .magazinebookcase .books {
  text-align:center;
  float:left;
  position: relative;
  vertical-align:bottom;
  }
  
  .magazinebookcase a {
  border: 1px solid #000;
  display: block;
  word-break: break-all;
  }
  
  .magazinebookcase a:hover {
  background-color: #ccc;
  }
  </code></pre>
  
  <p>I've tried many ways, changing the positions from absolutes to relatives and other things but I can't do it properly. Any help?</p>