0

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

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;
}
3
  • Have you tried adding clear:both; to the last element in each row?
    – aroth
    May 9, 2011 at 22:31
  • Ah, good thinking, clear: both; needed to be added to the 'first' element though and it works perfectly!
    – waffl
    May 9, 2011 at 22:35
  • @artoh - maybe post it as an answer if you'd like the reputation.
    – waffl
    May 9, 2011 at 22:58

1 Answer 1

1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.