title: Scale div width to content (within another div)
body: <p>In the fiddle provided, I would like to have .content div width scale automatically to the fit the .product divs within it.</p>
  
  <p>This is crucial as there will be varying amounts of products so a fixed width is not appropriate </p>
  
  <p><a href="http://jsfiddle.net/9GcM3/2/" rel="nofollow">http://jsfiddle.net/9GcM3/2/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="content"&gt;
      &lt;div class="product"&gt;
          &lt;p&gt;string&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="product"&gt;
          &lt;p&gt;string&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="product"&gt;
          &lt;p&gt;string&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="product"&gt;
          &lt;p&gt;string&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="product"&gt;
          &lt;p&gt;string&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="product"&gt;
          &lt;p&gt;string&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="product"&gt;
          &lt;p&gt;string&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="product"&gt;
          &lt;p&gt;string&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="product"&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS</p>
  
  <pre><code>.container {
  height:100px;
  width:400px;
  background:red;
  padding:0 10px;
  overflow-x: hidden;
  
  
  
  }
      .content {
  background:#eee;
  height:70px;
  
  
      width: 2000px;
  
  }
  .product {
  height:80px;
  width:100px;
  display: inline-block;
  float: left;
  }    
  </code></pre>