title: CSS/HTML variable container width
body: <p>I have a table that has varying cells of varying widths that are hiding/showing based on user toggle. I would like the container div to expand with the columns.</p>
  
  <p>I was thinking of looping through a <code>$('.row').first().find('.cell')</code> and calculating/tallying the width and setting the <code>#container</code> width like that, but was hoping for a better solution to come along.</p>
  
  <p>On a sidenote, since the <code>.cell</code> divs are <code>float: left</code>, would I want to specify a height for my <code>.row</code> or use <code>display: inline-block</code>?</p>
  
  <p><strong>HTML</strong>    </p>
  
  <pre><code>&lt;div id="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="sm-cell cell cell-1"&gt;1&lt;/div&gt;
      &lt;div class="md-cell cell cell-2"&gt;2&lt;/div&gt;
      &lt;div class="sm-cell cell cell-3"&gt;3&lt;/div&gt;
      &lt;div class="sm-cell cell cell-4"&gt;4&lt;/div&gt;
      &lt;div class="sm-cell cell cell-5"&gt;5&lt;/div&gt;
      &lt;div class="md-cell cell cell-6"&gt;6&lt;/div&gt;
      &lt;div class="lg-cell cell cell-7"&gt;7&lt;/div&gt;
    &lt;/div&gt; 
    &lt;div class="clear"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.clear { clear: both; }
  
  .row {
      margin: 1px 0;
  }
  
  .cell {
      float: left;
      text-align: center;
      background: #999999;
      padding: 2px;
  }
  </code></pre>
  
  <p><strong>Interactive jsFiddle</strong></p>
  
  <p><a href="http://jsfiddle.net/dboots/uenz4hee/2/" rel="nofollow">http://jsfiddle.net/dboots/uenz4hee/2/</a></p>