Using float to move objects underneath each other

when they are of differing heights

[Murdoch]

I have a little project where I'm using float:left to try placing three columns of block level elements on a page. I want them to go 1 through 3 across the top and then 4 through 6, etc. The only problem is that if block 3 is much taller than block 1, block 4 still gets positioned underneath block 1 but ends up down the page where the height of block 3 would normally place it. I tried using display:inline but that doesn't seem to work. I also tried placing it all in a td and using valign=top but to no avail. How do you think this is possible where they always float left but always attach to the bottom of the div in their respective spots?

Thanks
-Doc

[swa66]

If you give your 4th block "clear:left" it should drop down below all 3 previous ones under block 1, so that 5 and 6 will fix next to it under 2 and 3.

[Murdoch]

Awesome. Works like a charm. Thanks.

[Murdoch]

I guess I spoke too soon. Didn't really test it right.

The div does drop down below box 1 but it's hanging down the page as if there's some containing div for the first row (since box 3 is twice as tall as box 1). But there aren't any containing div for the rows, so it's weird.

Anyway, thanks for the help.

[Murdoch]

Okay, I came up with what seems to be at least an acceptable fix:

I had to float box 1 left and box 3 right (and user clear:left and clear:right respectively) and left box 2 unfloated. This seems to make it so that box 1 always fits right up against the one "above" it and same for 2 and 3.

The only downside to this is it gives one column the chance to be significantly longer than the other but hey if that's how it has to be then so be it.