title: How to make an element strech to the same height as the content within it?
body: <p>The header div's height will not stretch vertically to fit the content within it unless I specify a height for it or unless I stick one of these:</p>
  
  <pre><code>  &lt;div style="clear:both"&gt;&lt;/div&gt; 
  </code></pre>
  
  <p>before the header div's closing tag.</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  #header {
      border: 1px solid green;
  }
  &lt;/style&gt;
  
          &lt;div id="header"&gt;
              &lt;span id="logo"&gt;&lt;img src="images/logo.png" /&gt;&lt;/span&gt;
              &lt;span class="fright"&gt;something will go here&lt;/span&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;&lt;!-- header --&gt;
  </code></pre>
  
  <p>Can this be done without the use of a "clearing div" or without giving the header div a fixed height?</p>