html - インラインブロック要素の問題

Question

原則として「メトロ」のデザインに近い画面を作ろうとしています。

私が行っている方法は、すべての要素が同じ幅ですが、同じ高さではないということです。次に、それらはすべて上に整列し、それらの上にスペースを残さずに、空いている空きスペースを把握する必要があります。

私が抱えている問題は、要素をインラインブロックに設定すると、次のようにレンダリングされることです:

それらをフロートに設定すると、一方は正しく見えますが、もう一方はそうではありません。以下は、float:left と float:right の両方です。

これは例のフィドルです： http://jsfiddle.net/paulocoelho/2qyrp/

ツィーコード:

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

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