title: HTML div elements not taking the height of their parent, even though the parent has nonzero height
body: <p>I have a fairly simple problem. I have a container div with three children - two divs and a table. The following is the CSS:</p>
  
  <pre><code>#container {
     overflow: auto;
  }
  #child1 {
     float: left;
     width: 50px;
     height: 100%;
  }
  #table1 {
     float: left;
  }
  #child2 {
     float: left;
     width: 50px;
     height: 100%;
  }
  </code></pre>
  
  <p>The HTML is very simple as well</p>
  
  <pre><code>  &lt;div id='container'&gt;
        &lt;div id='child1'&gt;&lt;/div&gt;
        &lt;table id='table1'&gt;
          &lt;tbody&gt;&lt;/tbody&gt;
        &lt;/table&gt;
        &lt;div id='child2'&gt;&lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>The table has some content that sets its height. When the page is rendered, the height of the parent container div is set to the height of the table, as it should. The other children, however, are being collapsed for some reason. Here's the example, with some table elements and styling for clarity: <a href="http://jsfiddle.net/GUEc6/" rel="noreferrer">http://jsfiddle.net/GUEc6/</a>. As you see, the height of the container div is being properly set to the height of the table, but the child1 and child2 divs fail to properly set their heights to 100% of that. I know that if a floated element has its height set to 100%, the parent element needs to have some definition of its own height so the child can be 100% of something concrete. But it doesn't look like that's what's happening here.</p>