I currently have 5 divs that I need to structure in a specific way:
- Each div must have a minimum size of 100px
- The parent container should display as many divs as possible on the first row, with any remaining divs wrapping to new rows if necessary
- If the first row does not have an optimal size, the divs should be distributed equally across the rows
Here are some examples of the layout I am trying to achieve:
200px:
250px:
300px:
For example, if the size of the parent container is 450px, there should be 4 divs each with a width of 112.5px.
Although I have managed to get the wrapping done, I am struggling with resizing the divs:
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;
}
Here is the link to the jsfiddle: http://jsfiddle.net/Vbjv5/
I'm actively seeking a CSS solution for this challenge, but open to incorporating JavaScript if needed :)