title: Height expand with contents
body: <p>I have the following horizontal menu:</p>
  
  <pre><code>&lt;nav style="min-height: 50px"&gt;
      &lt;ul&gt;
          &lt;li style="display: inline;"&gt;
              &lt;a href="" style="float: left;"&gt;Link text&lt;/a&gt;
          &lt;/li&gt;
          ...
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>I want the <code>&lt;nav&gt;</code> element height to expand with its contents. Now to fix this I could do something like this:</p>
  
  <pre><code>&lt;nav style="min-height: 50px"&gt;
      &lt;ul&gt;
          &lt;li style="display: inline;"&gt;
              &lt;a href="" style="float: left;"&gt;Link text&lt;/a&gt;
          &lt;/li&gt;
          ...
      &lt;/ul&gt;
      &lt;br style="clear: both;" /&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>This "fix" doesn't look right to me semantically, so is there a cleaner way of achieving the same effect?</p>