Group of left-floated fixed-width divs within a container - strange behaviour (irregular break to next row?)

I have a group of divs that I want to arrange in 4 columns. I've created css rules such that the first item has a left and right margin, the following two only a right margin, and the fourth element in a row to have no left or right margin:

article.participants-th开发者_高级运维umbnail {
    width: 180px;
    float: left;
    margin-right: 73px;
    margin-bottom: 73px;
}

article.participants-thumbnail:nth-of-type(4n) {
    margin-right: 0;
}

article.participants-thumbnail:nth-of-type(4n+1) {
    margin-left: 18px;
    margin-right: 73px;
}

It worked perfectly but for some reason now, the 5th (1st item of row 2) item is on its own row completely.

It works properly in jsfiddle: http://jsfiddle.net/waffl/dJEYF/embedded/result/

Thank you!

--

Update

As per the comment recommendation, the following css works:

article.participants-thumbnail {
    width: 180px;
    float: left;
    margin-right: 73px;
    margin-bottom: 73px;
}

article.participants-thumbnail:nth-of-type(4n) {
    margin-right: 0;
}

article.participants-thumbnail:nth-of-type(4n+1) {
    margin-left: 18px;
    margin-right: 73px;
    clear: both;
}

---

Usually when floating div's behave strangely, it's because a clear: both; style needs to be added between each logical row of floating elements.