Align floated divs top to bottom

Question

I have one article tag, inside a php code that generate articles from wordpress. They are not all the same height ofc, it depends on the content. They are organised in two columns by float.

If a article in the first line is not the same height as the other one in the same row, the second row is aligned to the bottom of the biger div. Now I want to align them without any spacing.

Here is some css:

#container {
width: 1000px;
margin: 0px auto;
}

article {
position: relative;
width: 435px;
margin: 10px 10px;
background-color: rgba(0, 0, 0, 0.5);
padding: 20px;
float: left;
}

Edit jsFiddle (now with content to demonstrate the problem): http://jsfiddle.net/4PMj5/6/

Answer 1

You can use even and odd chilren pseudo selection in your CSS.

article:nth-child(even) {
    position: relative;
    width: 435px;
    margin: 10px 10px;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 20px;
    float: right;
}
article:nth-child(odd) {
    position: relative;
    width: 435px;
    margin: 10px 10px;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 20px;
    float: left;
}

The result will be like: this updated fiddle.