title: Align image to the bottom of a left-floated div
body: <p>Trying to create a WEB interface for my local collection of comic books. The look'n'feel should be very similar to Apple's iBooks - book covers sittings on the bookshelves. The covers are similar but not identical in height and width. Can't figure out how to push the image covers to the bottom of the div without indicating the width of the containing div. Going with absolute-inside-relative simply stacks the covers into a pile.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="cover"&gt;&lt;a href="#"&gt;&lt;img src="cover1.jpg"&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;div class="cover"&gt;&lt;a href="#"&gt;&lt;img src="cover2.jpg"&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;div class="cover"&gt;&lt;a href="#"&gt;&lt;img src="cover3.jpg"&gt;&lt;/a&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body {background-image: url(http://image.bayimg.com/oaddpaaea.jpg); background-repeat: repeat;}
  .cover {float: left; height: 258px; border: 1px solid red; margin: 0px 5px 25px 5px;}
  .cover img {border: 1px solid green; -webkit-box-shadow: 0 8px 6px -6px black; -moz-box-shadow: 0 8px 6px -6px black; box-shadow: 0 8px 6px -6px black;}
  </code></pre>
  
  <p>jsFiddle Example:
  <a href="http://jsfiddle.net/NATqD/">http://jsfiddle.net/NATqD/</a></p>