Stacked boxes

stacked boxes using nth-child expressions and clear:both to force a new row, and overflow:hidden on containing element to maintain vertical spacing between rows

HTML

<section class="container">
    <div class="alpha">alpha</div>
    <div class="beta">beta</div>
    <div class="gamma">gamma</div>
    <div class="alpha">alpha</div>
    <div class="beta">beta</div>
    <div class="gamma">gamma</div>
    <div class="alpha">alpha</div>
    <div class="beta">beta</div>
    <div class="gamma">gamma</div>
    <div class="alpha">alpha</div>
    <div class="beta">beta</div>
    <div class="gamma">gamma</div>
</section>nth-child expressions are supported in Chrome, Firefox, Safari, Opera and IE >= 9

CSS

.container {
   
}
div {
    float : left;
    width : 100px;
    height : 50px;
    margin-right : 12px;
    margin-bottom : 12px;
}
div:nth-child(4n + 5) {
    clear: both;
}
.alpha {
    background : red;
}
.beta {
    background : blue;
}
.gamma {
    background : green;
}