jquery sortable, floats, and clears

So I have a quick mockup here of what I am trying to do - http://antimac.meloncreative.co.uk/labs/nth.php

The live version is done using thumbnails inside the divs, and these thumbnails are of various aspect ratios. So the width is always 100px, but the height can be whatever (more or less).

Anyways, because of this, and using float, sometimes they dont nicely fit into 5 on a line, with some going below others so they are more or less on their own line, which makes it look a mess.

So... how do I make it when sorting, and when updated, the clears will always nicely make 5 divs per row? Currently the bit where I am doing

$('#reorder div.x:nth-child(5n)').addClass('clear green');

... isnt working as I'd hoped

Edit: So I think the problem lies in the (5n) part, as when I drag say item 1, between 5 and 6, during the drag there are 2 blocks missing from the first row, then when I drop it, there is 1 missing from the first row. This possibly has something to do with the clone of the one I am dragging still being there slewing the results, ideas?

Solution

So the answer seemed to be

$('#reorder').sortable({
        placeholder: 'placeholder',
        sort: function(event, ui) {
            $('#reorder div').removeClass('clear green');
            $('#reorder div.x:not(.ui-sortable-helper)').addClass('y');
            $('#reorder div.placeholder').addClass('y');
            $('#reorder div.y:nth-child(5n + 1)').addClass('clear green');
        },
        update: function(event, ui) {
            $('#reorder div.x').removeClass('y');
            $('#reorder div.x').removeClass('clear green');
            $('#reorder div.x:nth-child(5n + 1)').addClass('clear green');
        }
    });
    $('.reorder').disableSelection();
});

It was having issues with placeholders and also the helper that was still in place from what was being dragged around.