issue with inline blocks

HTML

<div class='smallBlock'></div>
<div class='smallBlock'></div>
<div class='smallBlock'></div>
<div class='largeBlock'></div>
<div class='smallBlock'></div>
<div class='smallBlock'></div>
<div class='smallBlock'></div>
<div class='smallBlock'></div>
<div class='smallBlock'></div>
<div class='smallBlock'></div>
<div class='smallBlock'></div>
<div class='smallBlock'></div>
<div class='smallBlock'></div>
<div class='smallBlock'></div>

CSS

div{
    display:inline-block;
    vertical-align:top;
    margin:1px;
    /*float:left;*/
}

.smallBlock{
    height:50px;
    width:400px;
    background:blue;
}
.largeBlock{
    height:90px;
    width:400px;
    background:red;
}