CSS float: left causing unnecessary whitespace with varying height

Question

This is a problem with a live website, the page I'm talking about is this .

Basically I have some PHP which echos out images from my db wrapped in divs, like this, for example, for each image:

<div class='gall_div'>
<a href='img_gallery/CD cover Bach 2.jpg' class='lightbox'>
<img class='galleryImage' title='(tooltip)' src='someimg.jpg'>
</a></div>

I want my images to wrap to the left, the CSS looks like this:

div.gall_div {
    float:left;
    margin-right:120px;
    padding-bottom:10px;
        padding-top:10px;
    width: 100px;
}

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?

Answer 1

I'd say that the best solution here would be to change your CSS slightly, to declare them as inline-block elements, and have the text-align set to the left:

div.gall_div {
    display:inline-block;
    margin-right:120px;
    padding-bottom:10px;
        padding-top:10px;
    text-align:left;
    width: 100px;
}

Additionally, this allows you to set vertical-align: middle; so that they can be vertically centered, if need be.