CSS: parent div doesn't resize when its insides do

Question

I've got a simple CSS:

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;
}

and a simple page:

    <div class="header">
       <!-- some control inside -->
    </div>
    <div class="middle">
       <!-- left navigation list -->
       <div class="links">
           <!-- some control inside -->
       </div>
       <!-- content place -->
       <div class="content">
            <asp:ContentPlaceHolder id="myContentPlaceHolder" runat="server">
            </asp:ContentPlaceHolder>
       </div>
    </div>
    <div class="footer">
       <!-- some control inside -->
    </div>

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?

Answer 1

When putting content into a div with a float property, I always place a div with clear:both at the end of its contents to ensure proper resizing. You already have a class footer which does this, if that's all it's for then use it here., e.g.:

   <div class="links">
       <!-- some control inside -->
       <div class="footer"></div>
   </div>

If you plan on having more style on footer you might want to create a new class just for this purpose.