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

I found an even better css-only solution. All you have to do is add the following css to the children DIV’s:

.box {
    display: inline-block;
    vertical-align: top;
    float: none;
}

That’s it! All you have to do is have them display as inline-blocks instead of positioning them as floated DIV’s! I can’t believe I didn’t figure it out before…