title: align nav to bottom of header
body: <p>My header holds a logo image as well as my nav element. I would like my nav to sit at the bottom of the header, but without using absolute positioning or specific top/left pixels because I would like this to be responsive.</p>
  
  <p>Here is my code so far</p>
  
  <p><a href="http://jsfiddle.net/Aiedail/86ZGd/" rel="nofollow">http://jsfiddle.net/Aiedail/86ZGd/</a></p>
  
  <p>I had tried adding like a </p>
  
  <pre><code> nav{margin-top: 50%;} 
  </code></pre>
  
  <p>but that used the full page height rather than the containing div height.</p>
  
  <p>Any suggestions or help would be appreciated.</p>