float left elements in flexible box

by evpozdniakov

HTML

<div class="box clearfix">
    <div class="thumbnail"></div>
    <div class="thumbnail"></div>
    <div class="thumbnail"></div>
    <div class="thumbnail"></div>
    <div class="thumbnail"></div>
    <div class="thumbnail"></div>
    <div class="thumbnail"></div>
    <div class="thumbnail"></div>
    <div class="thumbnail"></div>
</div>

CSS

body {
    padding: 20px;
}

.box {
    padding: 0 5px;
    border: 2px solid #ccc;
}

.thumbnail {
    float: left;
    margin: 10px 5px;
    width: 100px;
    height: 100px;
    border: 1px solid #f00;
    background: #fee;
}

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }