CSS floats with maximizing widths?

Question

I have 5 divs and I'm trying to structure them in the following way:

1. The divs have a minimum size of 100px
2. The parent has to show as much of these as possible on the first row; the remaining divs should be wrapped to a new row (or more rows if necessary)
3. If the first row has a non optimal size the divs should be distributed equally (ie. parent size is 250px - there are 2 divs on the first row having a width of 125px).

Some examples of what I'm trying to achieve:

200px: http://s22.postimg.org/5hj8m5qrl/es3.png
250px: http://s22.postimg.org/ikev5fgzl/es1.png
300px: http://s22.postimg.org/jy6i0qg8x/es2.png

If the size of the parent is 450px, there should be 4 divs, having a width of 112.5px each.

This is what I've tried, but I only got the wrapping done. I have no idea on how to resize them:

HTML:

<div class="parent">
<div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget vulputate justo. Phasellus non mi metus.</div>
<div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget vulputate justo. Phasellus non mi metus.</div>
<div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget vulputate justo. Phasellus non mi metus.</div>
<div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget vulputate justo. Phasellus non mi metus.</div>
<div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget vulputate justo. Phasellus non mi metus.</div>
<div class="clear"></div>

CSS

.parent{
    width: 250px;
    border: 2px solid red;
}

.parent .child {
    width: 96px;
    border: 2px solid black;
    float: left;
}

.parent .clear {
    clear: both;
}

There is the link to jfiddle: http://jsfiddle.net/Vbjv5/

I'm looking for a possibile CSS solution, however if it's not possible to achieve this in CSS, javascript is still welcome :)

Answer 1

use jquery simply like this.

jQuery(document).ready(function($) {
    var parent_width=$('.parent').width();
    var count=$('.item').length();
    var param=parent_width/count;
    $('.item').width(param);
});