CSS left floats sitting on top of each other

Question

So, I'm trying to create a div class that will display in a row and then automatically wrap to the next row when all the space is taken up.

.contributor_thumbnail {

    display: block;
    float: left;
    width: 150px;
    height: 150px;
    border: 1px solid #777;

}

So that when I call the code like this:

   <div class="contributor_thumbnail">thumb here</div>
   <div class="contributor_thumbnail">thumb here</div>
   <div class="contributor_thumbnail">thumb here</div>
   <div class="contributor_thumbnail">thumb here</div>

The divs will sit side by side.

Right now the divs just overlap. Any ideas?

Answer 1

Edit: Completely misread your question... Thought you said you didn't want it to be in a row. D'oh, well I'll leave this here just in case someone didn't know.

---

You're looking for the CSS clear property. Just add clear: both; to your CSS.

http://www.w3.org/TR/CSS2/visuren.html#flow-control

Fiddle http://jsfiddle.net/zRKYM/