title: Containing div smaller than children
body: <p>Given the following</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#container {
      border:solid 3px red;
  }
  
  #left {
      float: left;
      background-color: lightblue;
      height: 300px;
  }
  
  #right {
      float: left;
      background-color: coral;
      height: 300px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id='container'&gt;
      &lt;div id='left'&gt;Left content&lt;/div&gt;
      &lt;div id='right'&gt;Right content&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>(See: <a href="http://jsfiddle.net/ericjohannsen/JCPEH/1/" rel="nofollow noreferrer">http://jsfiddle.net/ericjohannsen/JCPEH/1/</a>)</p>
  
  <p>Why does <code>container</code> apparently not have any area (that is, it has a zero height, plus the border)?  I naively expected it to be as tall as the child <code>div</code>s that it contains.</p>
  
  <p>What is the proper way to set this up so that the <code>div</code> containing the two children is as tall as the children?</p>