Create equal-width div's with CSS

Question

I have a div with a certain width and within this parent 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 float:left or display:inline-block) 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.

I have tried doing this in the following jsFiddle, but I can't figure out how to make it work without any JavaScript. jsFiddle

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 float:left or display:inline-block.

Answer 1

Maybe make it as a table, and add all elements as td inside one tr. If you want here is a jQuery Solution

EDIT

This is the only way I can think of using pure CSS, not sure if there is any other way

Also check this already existing question Distribute elements evenly using CSS in SO