title: Vertical-Align Divs in HTML/CSS
body: <p>I'm trying to create a <code>header</code> consisting of an <code>h1</code> and a <code>nav</code> element. I want the bottom of the <code>nav</code> to be aligned with the bottom of the <code>h1</code>.</p>
  
  <p>Here's what I've tried:</p>
  
  <h3>HTML</h3>
  
  <pre><code>&lt;header&gt;
      &lt;h1&gt;Web site Header&lt;/h1&gt;
        &lt;nav&gt;
           &lt;ul&gt;
            &lt;li&gt;one&lt;/li&gt;
            &lt;li&gt;two&lt;/li&gt;
            &lt;li&gt;three&lt;/li&gt;
           &lt;/ul&gt;
         &lt;/nav&gt;
   &lt;/header&gt;
  </code></pre>
  
  <h3>CSS</h3>
  
  <pre><code>header {vertical-align: bottom; width: 100%; height: 300px;}
  h1 {vertical-align: bottom; float: left;}
  nav {vertical-align: bottom; float: right;}
  nav ul li {display: inline;}
  </code></pre>
  
  <p>I could do this by setting exact margins for my elements, but I thought this would be cleaner (if it's possible). Any advice on how to fix it/if it can be done?</p>
  
  <p>Thanks!</p>