Создание div одинаковой ширины с помощью CSS

У меня есть div определенной ширины, и внутри этого 'родительского' div я хотел бы разместить один или больше "дочерних" div. Я бы хотел, чтобы они располагались рядом друг с другом (поэтому я использую либо float: left, либо display: inline-block), и я хочу, чтобы все они были одинаковой ширины. Я очень хочу, чтобы они чтобы заполнить родительский div (так что, если у меня 4 div, каждый из них должен иметь ширину 25%, если 5 - 20% ширины и т. д.) с определенной максимальной шириной. Ключевым моментом здесь является то, что он должен работать независимо от количества div - может может быть 1, может быть 5, может быть 15.

Я пробовал сделать это в следующем jsFiddle, но не могу понять, как заставить его работать без какого-либо JavaScript. jsFiddle

Думаю, моя проблема это то, что div обычно расширяется до ширины своего содержимого, где я хочу, чтобы они расширялись, чтобы соответствовать родительскому? Я могу попробовать width: 100% на всех дочерних div, но не похоже, что это слишком хорошо работает с float: left или display: inline- блок.