title: CSS container doesn't stretch to accommodate floats
body: <pre><code>&lt;html&gt;
  
  &lt;head&gt;
  
  &lt;style type="text/css"&gt;
  
    .container {
        width: 900px;
        border: 2px solid #333333;
        padding-top: 30px;
        padding-bottom: 30px;
    }
  
    .container_left {
        border: 2px solid #FF00FF;
        width: 650px;
        float: left;
    }
  
    .container_right {
        border: 2px solid #0000FF;
        width: 225px;
        float: right;
    }
  
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div class="container"&gt;
          &lt;div class="container_left"&gt;
          &lt;div&gt;LEFT CONTAINER&lt;/div&gt;
          &lt;div&gt;LEFT CONTAINER&lt;/div&gt;
          &lt;div&gt;LEFT CONTAINER&lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="container_right"&gt;
          &lt;div&gt;RIGHT CONTAINER&lt;/div&gt;
          &lt;div&gt;RIGHT CONTAINER&lt;/div&gt;
          &lt;div&gt;RIGHT CONTAINER&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The result is:<br />
  <img src="https://i.stack.imgur.com/nCeBy.jpg" alt="result"></p>
  
  <p>I want a result like this:<br />
  <img src="https://i.stack.imgur.com/jPT4i.jpg" alt="desired result"></p>