title: CSS float: left causing unnecessary whitespace with varying height
body: <p>This is a problem with a live website, the page I'm talking about is <a href="http://continuumtrio.co.uk/gallery.php" rel="nofollow">this</a>.</p>
  
  <p>Basically I have some PHP which echos out images from my db wrapped in divs, like this, for example, for each image:</p>
  
  <pre><code>&lt;div class='gall_div'&gt;
  &lt;a href='img_gallery/CD cover Bach 2.jpg' class='lightbox'&gt;
  &lt;img class='galleryImage' title='(tooltip)' src='someimg.jpg'&gt;
  &lt;/a&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I want my images to wrap to the left, the CSS looks like this:</p>
  
  <pre><code>div.gall_div {
      float:left;
      margin-right:120px;
      padding-bottom:10px;
          padding-top:10px;
      width: 100px;
  }
  </code></pre>
  
  <p>Notice, if you try resizing the page, unnecessary whitespace appears to the left of the second/third row of images. I believe this is due to varying image height. How can I correct this?</p>