I'm having trouble with a page layout and would appreciate some help. Here's what I'm wanting:

![enter image description here](https://i.stack.imgur.com/C7iDG.png)

If the browser's width is decreased, then the 3rd grey div should drop down (forcing the last one to drop down as well), resulting in this:

![enter image description here](https://i.stack.imgur.com/5y2Sk.png)

So the green container should display as many as the grey inner containers as it can, while shrinking it's width and keeping itself centered.

My current code close to what I'm wanting, as the grey divs drop down when the page is resized, but the problem is that the grey divs are centered (putting them out of alignment with each other in the bottom row), making the output looks like this:

![enter image description here](https://i.stack.imgur.com/mN5tz.png)

While I'm wanting it to look like this:

![enter image description here](https://i.stack.imgur.com/8QdLP.png)

JSFIDDLE: <http://jsfiddle.net/2S7gz/5/>

How can this be accomplished?

Current HTML:

```
<div class="body">
    <div class="outerContainer">
        <div class="innerContainer">
            inner container
        </div>

        <div class="innerContainer">
            inner container
        </div>

        <div class="innerContainer">
            inner container
        </div>    

        <div class="innerContainer">
            inner container
        </div>   

        <div class="innerContainer">
            inner container
        </div>   
    </div>
</div>

```

CSS:

```
.body {
    background-color: #fee;
    text-align: center;
    padding: 25px;
}

.outerContainer {
    background-color: #efe;
    display: inline-block;
}

.innerContainer {
    display: inline-block;
    width: 200px;
    height: 200px;
    margin: 10px;
    background-color: #f1f1f1;
}

```