title: CSS left floats sitting on top of each other
body: <p>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.</p>
  
  <pre><code>.contributor_thumbnail {
  
      display: block;
      float: left;
      width: 150px;
      height: 150px;
      border: 1px solid #777;
  
  }
  </code></pre>
  
  <p>So that when I call the code like this:</p>
  
  <pre><code>   &lt;div class="contributor_thumbnail"&gt;thumb here&lt;/div&gt;
     &lt;div class="contributor_thumbnail"&gt;thumb here&lt;/div&gt;
     &lt;div class="contributor_thumbnail"&gt;thumb here&lt;/div&gt;
     &lt;div class="contributor_thumbnail"&gt;thumb here&lt;/div&gt;
  </code></pre>
  
  <p>The divs will sit side by side.</p>
  
  <p>Right now the divs just overlap.  Any ideas?</p>