Trying to Line Up Divs

Question

It might be that time in the evening, but I can't work out how to line up these article elements. When one of my articles has more text, it stops the rest of the articles from floating left properly.

I've set up a demo here: http://codepen.io/realph/pen/eumyj

Any help is appreciated. Thanks in advance!

Answer 1

The easiest approach (though it has limited support), would be to use CSS3 columns :

UPDATED EXAMPLE HERE

.container {
    background: brown;
    width: 940px;
    margin: 0 auto;
    columns: 4;
    -webkit-columns: 4;
    -moz-columns: 4;
}

Alternatively, just make the elements inline-block as opposed to floating elements, and then use vertical-align:top for alignment.

EXAMPLE HERE

article {
    display: inline-block;
    vertical-align: top;
    background: yellow;
    margin-right: 20px;
    margin-bottom: 40px;
    width: 200px;
}

Another approach would be to use nth-child to clear the fourth elements:

EXAMPLE HERE

article:nth-child(4n+1) {
   clear: both;
}