How to resize a container div to the total height of its children?

Question

I have a container element which I need to resize as its contents change. It contains 2 absolutely positioned divs which can both change height. If I don't specify the height of the container then anything after the container disappears under the contents.

At the moment I am doing the following but I'd be pleased to find a less laborious alternative:

(container has position:relative, #main and #sidebar are position:absolute, the contents of #sidebar have no positioning specified)

css:

div#mapcontainer { position:relative; width:100%; height: 600px;  }
div#main { position:absolute; top: 0; left: 10px; width: 500px; height: 400px; }
div#sidebar { position:absolute; top:10px; right:10px; width: 155px; height: 405px;}

html:

<div id="container">
    <div id="main">variable height content here</div>
    <div id="sidebar">
       <div id="foo">...</div>
       <div id="bar">....</div>
       ...
    </div>
<div>

js:

fixHeights = function() {   
    var children_height = 0;  
    $('#sidebar'). children().each(function(){children_height += $(this).height();});
    $('#container').height(Math.max(children_height, $('#main').height()));
};

Answer 1

This is a very odd question, as div's height is always the height of its children.

Are you floating content in your container div? When you float child content the containing div doesn't act the same anymore.

If you're floating content that extends past the bottom of the container div, add the following div to the very bottom of the children of the container div:

<div style="clear:both;"></div>

That will not allow children to float over it, thus forcing the containing div to be the height of its tallest child...

<div id="container">
  <div id="dynamic" style="float:left;width:100px;">dynamic content goes here</div>
  <div id="static" style="margin-left:104px;">Lots of static stuff here</div>
  <div style="clear:both;"></div>
</div>

---

Okay, I'm not sure why you're doing the positioning the way you are, but I've done something similar for a website that had to look like a desktop application. I don't believe there is any way to do this other than with javascript. Html documents are designed to flow, not be rigid. If you want to bail on the javascript, you'll have to let go of the positioning styles and use your floating and clearing divs. Its not that horrible...

Answer 2

if you're floating the container div "overflow: auto" can also work magically, esp with regard to the whole IE hasLayout debacle

Answer 3

You didn't specify but I think you are having a problem with floating elements and you want the container they are in to be at least the size of the biggest floating element. You should try the following CSS hack that forces the browser to rerender the size of the container element to the size of the floating elements:

#wrapper:after {
    clear:both;
    content:".";
    display:block;
    height:0;
    visibility:hidden;
}

Let me know what you come up with and if this works. There are many other hacks to try, depending on your browser.

Answer 4

I would try changing the css not to use absolute positioning. In Firefox you would need to use the wrapper trick mention in the comments to get the mapcontainer the right height.

div#mapcontainer { clear:both; width:100%; min-height: 600px; }

div#main { float:left; margin-left: 10px; width: 500px; height: 400px; }

div#sidebar { float:left; margin-top:10px; margin-right:10px; width: 155px; height: 405px;}