title: How to resize parent div while keeping dynamic child divs 100% height
body: <p>How can I set up a group of 3 divs (dynamic size and visibility) to automatically fill (height) a specific space on the page.</p>
  
  <p>For example I have so far created:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="details"&gt;...&lt;/div&gt;
      &lt;div id="video"&gt;...&lt;/div&gt;
      &lt;div id="map"&gt;...&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="other_content"&gt;...&lt;/div&gt;
  </code></pre>
  
  <p>The #container should be full width, with automatic height depending on the size of the largest child div.</p>
  
  <p>The #details div should be displayed on left 'column' (this is normally the tallest div, but sometimes will be smaller than the combination of both #video and #map).</p>
  
  <p>Both #video and #map divs should be displayed as right 'column' with #video on top of #map.</p>
  
  <p>NOTE: #video is not always visible - in such cases #map should resize to height of #details (if larger) | or display as a minimum height (if #details is smaller).</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#container {
      float: left;
  }
  
  #details {
      float: left;
      width: 290px;
  }
  
  #video {
      float: left;
      width: 560px;
  }
  
  #map {
      float: left;
      width: 560px;
      min-height: 345px;
      height: 100%
  }
  
  #other_content {
      clear: left;
  }
  </code></pre>
  
  <p>I can't quite seem to get this to work, having a dynamically sized (height of largest child) container with all child objects displaying the full height.</p>