CODEWITHSUNDEEP
csslayoutcss-float
realph
realph

Reputation: 4671

Trying to Line Up Divs

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!

Upvotes: 1

Views: 52

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 240868

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;
}

Upvotes: 1

Related Questions