title: CSS: parent div doesn't resize when its insides do
body: <p>I've got a simple CSS:  </p>
  
  <pre><code>div.header
  {
      width:auto;
  }
  
  div.footer
  {
      clear:both;
  }
  
  div.middle
  {
      margin:5px 0 5px 0;
  }
  
  div.links
  { 
      width:200px; 
      float:left;
  }
  
  div.content
  { 
      width: 900px;
      margin-left:210px;
  }
  </code></pre>
  
  <p>and a simple page:</p>
  
  <pre><code>    &lt;div class="header"&gt;
         &lt;!-- some control inside --&gt;
      &lt;/div&gt;
      &lt;div class="middle"&gt;
         &lt;!-- left navigation list --&gt;
         &lt;div class="links"&gt;
             &lt;!-- some control inside --&gt;
         &lt;/div&gt;
         &lt;!-- content place --&gt;
         &lt;div class="content"&gt;
              &lt;asp:ContentPlaceHolder id="myContentPlaceHolder" runat="server"&gt;
              &lt;/asp:ContentPlaceHolder&gt;
         &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="footer"&gt;
         &lt;!-- some control inside --&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>The control placed inside "links" div is sometimes resized by javascript. The control is resized, but the parent div ("links" div) isn't - it preserves its original height. As a result the footer doesn't move down and the control overlaps it. How can I fix this so that resizing this control will cause resizing the parent div and as a result moving the footer down?</p>