css - Multiple inline-block DIV's to top

Question

How do I align multiple Inline-block div's above each other if a larger div is to the left like so: EXAMPLE

I'm trying to make the two boxes go below the other two, but they place them self below the larger div.

HTML:

<div class="container">
<div class="big"></div>
<div class="box"></div>    
<div class="box"></div>
<div class="box"></div>    
<div class="box"></div>
</div>

CSS:

.container{     
border: 1px black solid;
width: 320px;
height: 150px;
text-align:center;    
}

.box{
display: inline-block;
width: 20%;
height: 30%;
border: 1px black solid;
background: blue;   
vertical-align:top;

}

.big {
display: inline-block;    
border: 1px black solid;
width: 40%;
height: 60%;
background: beige;    
}

Any idea how I would accomplish this?

EDIT: I'm aware this can be done by floating everything to the left. However, I would still like to keep the centre alignment from the main container.

Answer 1

Add float:left to both the classes. Include the child wrapping div.

   .child_wrapper{
       display: inline-block; 
       width: 100%;
       height: 150px;
       margin:0 8%
    }    
    .box{
        display: inline-block;
        width: 20%;
        height: 30%;
        border: 1px black solid;
        background: blue;   
        vertical-align:top;
        float:left

    }

    .big {
        display: inline-block;    
        border: 1px black solid;
        width: 40%;
        height: 60%;
        background: beige;
        float:left
    }

DEMO Updated