title: How to resize a container div to the total height of its children?
body: <p>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. </p>
  
  <p>At the moment I am doing the following but I'd be pleased to find a less laborious alternative:</p>
  
  <p>(container has position:relative, #main and #sidebar are position:absolute, the contents of #sidebar have no positioning specified)</p>
  
  <p>css:</p>
  
  <pre><code>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;}
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="main"&gt;variable height content here&lt;/div&gt;
      &lt;div id="sidebar"&gt;
         &lt;div id="foo"&gt;...&lt;/div&gt;
         &lt;div id="bar"&gt;....&lt;/div&gt;
         ...
      &lt;/div&gt;
  &lt;div&gt;
  </code></pre>
  
  <p>js:</p>
  
  <pre><code>fixHeights = function() {   
      var children_height = 0;  
      $('#sidebar'). children().each(function(){children_height += $(this).height();});
      $('#container').height(Math.max(children_height, $('#main').height()));
  };
  </code></pre>