title: DIV container size to width of wrapped floating contents
body: <p>I'm trying to create a container div with a width only of the size of the contents. I have that part working correctly by using <code>float: left</code> on the container. Here is what I have so far.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class='container'&gt;
      &lt;div class='floater' style='background-color: #880000'&gt;1&lt;/div&gt;
      &lt;div class='floater' style='background-color: #008800'&gt;2&lt;/div&gt;
      &lt;div class='floater' style='background-color: #000088'&gt;3&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.container {
  background-color: #123456;
  float: left;
  }
  
  .floater {
  width: 300px;
  height: 100px;
  float: left;
  }
  </code></pre>
  
  <p>The problem I'm having is when the floater divs get wrapped inside the container. I do want them to wrap, but I also want the width of the container div to resize accordingly. For instance, if your browser is 1000px wide, it all works fine and the container is 900px. However if you shrink the browser to something like 750px wide, the 3rd dive wraps to the next line, but the container is 750px wide; not the 600px I want.</p>
  
  <p>Is the behavior I want possible? If so, how?</p>
  
  <p>I made a Fiddle for everyone to see what I'm talking about <a href="http://jsfiddle.net/m34n5/" rel="noreferrer">Click Here</a></p>