title: How can I use "float: left" in a div without breaking the containing element's height?
body: <p>It seems that floated HTML elements don't expand the heights of their containers. For example, consider the following code:</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>.portfoliosite {
      background: #777;
      padding: 10px;
      width: 550px;
  }
  .portfoliothumbnail {
      background: red;
      margin: 0 10px 10px 0;
      float: left;
      height: 150px;
      width: 150px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="portfoliosite"&gt;
      &lt;div class="portfoliothumbnail"&gt;&lt;!-- Img tag goes here --&gt;&lt;/div&gt;        
      &lt;p class="portfoliotitle"&gt;AwesomeSite.Com&lt;/p&gt;
      &lt;p class="portfoliodescription"&gt;An awesome site I did. It launched on Jan 1, 2009&lt;/p&gt;        
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Notice how the containing div with the gray background is shorter than the red div, and the red div extends outside the container's boundaries. I'd like the containing element to expand to the size of its contents, including the floated element.</p>
  
  <p>Is there an elegant solution for accomplishing this, preferably one that doesn't involve setting a fixed height or using JavaScript?</p>