A Wrapping Re-sizable Horizontal List, HTML

Question

I'm trying to make a re-sizable horizontal list in HTML, with some fairly specific behavior. However, I'm not sure on the best way to go about implementing it.

I have a list of fixed width items (divs, red) that I want to fill all of the allotted horizontal space with; spreading out evenly to fill the gaps. However on narrower screens that aren't able to fit all of the items in a horizontal row, I'd like another row to form containing the remaining items. This would be similar behavior to a word wrap, but the items would spread out evenly horizontally, if space permits.

It seems like there's probably a simple solution to this, but the problem is a bit too complicated to Google.

Answer 1

I think you'll struggle with that centering of the items pushing off the lines, but for the rest of it, you can do something like this:

#main
{
    width: 100%;
    background-color: blue;
    float: left;
}

.redDiv {
    width: 16%
    background-color: red;
    height: 150px;
    margin: 2%;
    float: left;

}

Given this HTML structure:

<div id="main">
    <div class="redDiv"></div>
    <div class="redDiv"></div>
    <div class="redDiv"></div>
    <div class="redDiv"></div>
    <div class="redDiv"></div>
    <div class="redDiv"></div>
</div>

DEMO: http://jsfiddle.net/QwQSd/1