title: Create equal-width div's with CSS
body: <p>I have a div with a certain width and within this <code>parent</code> div I would like to place one or more 'child' divs.  I would like them to be placed next to each other (so I'm using either <code>float:left</code> or <code>display:inline-block</code>) and I want them to all be the same width.  I pretty much want them to fill the parent div (so if I have 4 divs they should each be 25% width, if 5 20% width etc) with a certain max-width.  They key here is that it should work no matter the number of divs - could be 1, could be 5 could be 15.</p>
  
  <p>I have tried doing this in the following jsFiddle, but I can't figure out how to make it work without any JavaScript.  <a href="http://jsfiddle.net/FQ8as/10/" rel="nofollow noreferrer">jsFiddle</a></p>
  
  <p>I guess my problem is that divs usually expand to the width of their content where I want them to expand to fit the parent?  I can try width:100% on all the child divs, but it doesn't seem like this plays too well with <code>float:left</code> or <code>display:inline-block</code>.</p>