html - CSS min-height が div をインラインに保持しない

Question

メディア クエリでこの CSS コードを使用しています。

.clearfloat {
    clear: both;
    font-size: 1px;
    height: 0;
    line-height: 0;
}
.box-container {
    width:100%;
    text-align:center;
}
.icon-box {
    width:32%;
    max-width:500px;
    display:inline-block;
    border:1px solid #CCC;
    margin-top:10px;
    margin-bottom:10px;
}

@media screen and (max-width: 990px) {
    .icon-box {
        width:290px;
    }
}
@media screen and (max-width: 960px) {
    .icon-box {
        width:270px;
    }
}

@media screen and (max-width: 880px) {
    .clearfloat {
        display:none;
    }
    .icon-box {
        width:80%;
        margin:0 auto 0 auto;
        margin-top:10px;
        margin-bottom:10px;
    }
}

ボックスごとに最小の高さを設定したいのですが、追加するとボックスがインラインで表示されません

ここに完全な CSS と HTML コードを含む Fiddle があります: http://jsfiddle.net/aAtk5/1/