G+-esque layout in pure CSS

by kougiland

HTML

<!-- with classes -->

<div class="container-with-classes">
    <div class="odd" style="min-height:300px;"></div>
    <div class="even" style="min-height:260px;"></div>
    <div class="odd" style="min-height:200px;"></div>
    <div class="even" style="min-height:100px;"></div>
</div>

<hr/>

<!-- without classes -->

<div class="container">
    <div style="min-height:300px;"></div>
    <div style="min-height:260px;"></div>
    <div style="min-height:200px;"></div>
    <div style="min-height:100px;"></div>
</div>

CSS

.container,
.container-with-classes {
    width: 340px;
    counter-reset: items; /* just to help visualize source order */
}
.container:after,
.container-with-classes:after {
    clear: both;
    content: " ";
    display: table;
}

.container div,
.container-with-classes div {
    width: 150px;
    margin: 10px 10px;
}
.container div:nth-child(2n+1),
.container-with-classes .odd {
    float: left; /* floating block context */
    clear: left; /* make sure they won't float next to each other */
    background-color: red;
}
.container div:nth-child(2n),
.container-with-classes .even {
    display: inline-block; /* inline context */
    vertical-align: top; /* make sure they align suggly at top */
    background-color: green;
}

hr {
    clear: both;
}

/* show source order via counter */
.container div:before,
.container-with-classes div:before {
    counter-increment: items;
    content: counter(items);
    margin-left: 5px;
    line-height: 25px;
    color: #FFF;
}