title: How to make <div> grow with content?
body: <p>I got somethinglike this:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="wrapper"&gt;
  &lt;div id="header"&gt;
  &lt;ul&gt;
  &lt;li&gt;something&lt;/li&gt;
  &lt;li&gt;something&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div id="content"&gt;
  
  
  &lt;/div&gt;
  
  &lt;div id="footer"&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;&lt;!-- end of wrapper --&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>and I applied this CSS:</p>
  
  <pre><code>#wrapper {
  margin:0px auto;
  width:100%;
  }
  
  #header {
  background:#b82626;
  }
  
  #content {
  clear:both;
  float:left;
  width:75%;
  }
  
  #sidebar {
  margin-left:75%;
  }
  
  #footer {
  clear:both;
  height:50px;
  }
  </code></pre>
  
  <p>NOW, I need content of header to grow, eg. I add many pages <code>&lt;li&gt;&lt;/li&gt;</code>, and when I exceed the space, the height of header won't grow, just the text overflows the header border and goes into main content.</p>
  
  <p>So, if anyone can suggest me nice rule to apply here, It would be really nice.
  I need header  to grow with content. </p>
  
  <p>Thanks</p>