floating elements - issues in grid

Question

I'm building a webshop with an overview of products in a grid. It's three products in a row with a description(or title) below the product image. When they all have the same height, everything works perfect. When one of the products in a row has a longer title for example, and ends up with a different height, the first product on the next row moves to the right of the screen, leaving two blank spots on it's left. The products then continue on the next row. How can this be avoided?

I've made a little demo to demonstrate my problem:

http://jsfiddle.net/ppDp3/

Answer 1

Fixed it with isotope. I first let the ImagesLoaded plugin check if all the images are loaded and then I fire off the isotope plugin. Code shown below.

// Generated by CoffeeScript 1.7.1
var product, products;

if ($('.products').length > 0) {
  products = $('.products');
  product = $('.product');
  products.imagesLoaded(function() {
    return products.isotope({
      itemSelector: '.product',
      layoutMode: 'fitRows'
    });
  });
}