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

You could get the height of the footer div and then subtract the re-size of the links div and set the difference as the new height of that footer div. In jquery, that might be something like:

$("#links").click(function() {

     var footer-height = $("#footer").css("height");
     var links-height = $("#links").css("height");
     var links_resize = ...code to determine how much to resize links div ....

     $("#footer").css("height, " footer-height - links_resize);

     $("#links").css("height, " links-height + links_resize);

});

Answer 2

I think there are two ways you can solve this:

1. overflow on .middle:

   .middle { overflow: hidden; }

2. put your footer (or another div with clear:both) inside middle, after the other two divs

Answer 3

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.

Answer 4

http://websticky.blogspot.com/2009/10/float-left-doesnt-expand-parent-div.html

heres an article about floating divs not expanding their parent divs

Answer 5

Try adding 'float:left' to the parent div and see if that fixes it. Floated parents will contain floated children but parents are NEVER to expand just to contain floated elements.

Answer 6

Maybe IE8 was supposed to fix this issue, but it isn't fixed. Take the code from that article for example

<style>
.container
{
   width:300px;
   background-color:green;
}
.box
{
   float:left;
   width:100px;
   height:100px;
   border:3px solid red;
}
</style>
<div class="container">
   <div class="box"></div>
   <div class="box"></div>
</div>

Try it in IE8. You get the same result with IE 5 - 7. According to the article, you also get it in opera. The only mystery here is why IE continuously disregards the css docs. Instead of floating the container left to fix it, either create an empty div after the floats and do clear:both; or as the article states, do overflow:hidden; (or auto)