title: position divs at top and bottom of containing div
body: <p>I have a container div which has content that will sometimes need to be divided by <code>class="top"</code> and <code>class="bottom"</code>. Obviously there is no <code>float:top</code> or <code>float:bottom</code>, so what is the best way to achieve this with html/css alone?</p>
  
  <p>Ex:</p>
  
  <pre><code>&lt;div class="content"&gt;
          &lt;div class="left"&gt;
              &lt;a href="#"&gt;&lt;img src="img/home.jpg" alt="salon home"&gt;&lt;/a&gt;
          &lt;/div&gt;&lt;!-- end left --&gt;
          &lt;div class="center"&gt;
              &lt;a href="#" class="top"&gt;&lt;img src="img/about.jpg" alt="about salon"&gt;&lt;/a&gt;
              &lt;a href="#" class="bottom"&gt;&lt;img src="img/services.jpg" alt="salon service"&gt;&lt;/a&gt;
          &lt;/div&gt;&lt;!-- end center --&gt;
          &lt;div class="right"&gt;
              &lt;a href="#" class="top"&gt;&lt;img src="img/products.jpg" alt="salon products"&gt;&lt;/a&gt;
              &lt;a href="#" class="bottom"&gt;&lt;img src="img/contact.jpg" alt="contact salon"&gt;&lt;/a&gt;
          &lt;/div&gt;&lt;!-- end right --&gt;
      &lt;/div&gt;&lt;!-- end content --&gt;
  
  #container .content {
      margin-top: 115px;
  }
  
  #container .content .left {
      float: left;
      width: 307px;
  }
  
  #container .content .center {
      float: left;
      padding-left: 19px;
      width: 307px;
  }
  
  #container .content .right {
      float: right;
      width: 307px;
  }
  </code></pre>
  
  <p>ETA - FIDDLE - <a href="http://jsfiddle.net/FaTxw/2/" rel="nofollow">http://jsfiddle.net/FaTxw/2/</a></p>