Floating DIV's alignment problem.

Question

I have a fluid layout with DIV's of different heights and widths, and I'd like them to be aligned by lines, kind of like when you do a search on istockphoto, except aligned to the top:

image here-->http://i207.photobucket.com/albums/bb121/jpbanks/Capturadepantalla2010-06-02alas1902.png

I tried floating all the DIV's to the left, but they are not aligned correctly into lines:

image here-->http://i207.photobucket.com/albums/bb121/jpbanks/Capturadepantalla2010-06-02alas1900.png

See how "Prueba" doesn't go all the way to the left? I thought of the jQuery plugin Masonry but what I want is obviously different. Any solution using either CSS or jQuery would be fine. Any ideas?

Answer 1

They key is for each object to have an outer div that is the same size. Then an inner div that actually contains the photo. Then everything will be aligned properly.

Answer 2

Prueba gets "stuck" on CMAS and so the only way to do this would be to pick a standard div size that will fit any of your images or divs or whatever. IE:

.wrap{width:200px;height:200px;float:left;}
.inner{margin:0 auto;}

html:

<div class="wrap"><img src="whatever" class="inner" /></div>
<div class="wrap"><img src="anotherwhatever" class="inner" /></div>

Answer 3

You can use this plugin to give all the divs the height of the tallest div. However, in IE you'd need to ensure the images have the height set. Also, this does not seem to work on a per row basis, which would be ideal. perhaps you can modify it to your needs.

Answer 4

Ok, so this is what I ended up doing: On load, I run a jQuery .each() loop for each floated item (each '.rect'). It detects the first item in each line (using .position()) and adds a 'clear' class. Then, when the window is resized, it removes all the 'clear' classes, and does the .each() loop again.

Like so;

    $('.rect').each(function() {
    var este = $(this).position();
    var sig = $(this).next().position();
    if(este.left >= sig.left) {
        $(this).next().addClass('clear');
    }
});

$(window).resize(function () {
    $('.rect').removeClass('clear');
    $('.rect').each(function() {
        var este = $(this).position();
        var sig = $(this).next().position();
        if(este.left >= sig.left) {
            $(this).next().addClass('clear');
        }
    });
});

The css:

.rect {
    float: left;
}

.clear {
    clear: left;
}

And it works! Any comments/suggestions? I'm thinking of packing this into a tiny plugin. :)

Answer 5

Have you tried masonry? see: http://jasondaydesign.com/masonry_demo