title: Floating DIVs with auto-adjusting widths
body: <p>I currently have the following HTML:</p>
  
  <pre><code>&lt;div class="clearfix"&gt;
     &lt;div style="width:33%;float:left"&gt;content&lt;/div&gt;
     &lt;div style="width:33%;float:left"&gt;content&lt;/div&gt;
     &lt;div style="width:33%;float:left"&gt;content&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When there are 3 divs on the one line, and because I specified a percentage width for each, they all fully occupy the width of the parent width.  What I am trying to achieve is to have the floating divs auto-adjust their widths (i.e. without hard-coding a percentage width) depending on how many divs are present on the line.  For example, if there are 2 divs, then each would occupy half of the entire width of the parent (i.e. 50%).  If there are 3 divs, then 33%.</p>
  
  <p>Is this possible with floating divs?  If not, what other ways can I use to achieve this type of fluid layout?  I looked into making the parent use a 'table' display and the inner divs a 'table-cell' display, but then the parent stopped occupying 100% of the width available to it.</p>