javascript - CSS/HTML variable container width -

i have table has varying cells of varying widths hiding/showing based on user toggle. container div expand columns.

i thinking of looping through $('.row').first().find('.cell') , calculating/tallying width , setting #container width that, hoping better solution come along.

on sidenote, since .cell divs float: left, want specify height .row or use display: inline-block?

html

<div id="container">   <div class="row">     <div class="sm-cell cell cell-1">1</div>     <div class="md-cell cell cell-2">2</div>     <div class="sm-cell cell cell-3">3</div>     <div class="sm-cell cell cell-4">4</div>     <div class="sm-cell cell cell-5">5</div>     <div class="md-cell cell cell-6">6</div>     <div class="lg-cell cell cell-7">7</div>   </div>    <div class="clear"></div> </div> 

css

.clear { clear: both; }  .row {     margin: 1px 0; }  .cell {     float: left;     text-align: center;     background: #999999;     padding: 2px; } 

interactive jsfiddle

http://jsfiddle.net/dboots/uenz4hee/2/

you can make use of display:table

#container {     display:table;     background: #dedede; }   .row {     display:table-row; }  .cell {     display:table-cell;     float: left;     text-align: center;     background: #999999;     padding: 2px;     cursor: pointer;     border-bottom:1px solid #dedede; } 

example

also means can rid of clear divs

update

if want cells not wrap when screen size small can use display:inline-block instead:

#container {     display:inline-block;     background: #dedede; }  .row {     margin: 1px 0;     white-space:nowrap;     font-size:0; /* stop space between cells */ }  .cell {     font-size:10px; /* should set original font-size */     white-space:normal;     display:inline-block;     text-align: center;     background: #999999;     padding: 2px;     cursor: pointer; } 

example

if don't want use font-size hack, need comment out white-space between div.cell