Grid Layout with Variable Height DIVs

[Nolavar]

I have a series of DIVs containing lists. I want to lay these out using two colums:

DIV1 DIV2
DIV1 DIV2
DIV1 ____
DIV1 DIV3
____ DIV3
DIV4 DIV3
DIV4 ____
DIV4 DIV5
DIV4 DIV5
____ DIV5
____ DIV5

I presumed that simply setting the width and floating each div to the left ought to do it <div style="width: 300px; float: left;" /> but instead Firefox gives me:

DIV1 DIV2
DIV1 DIV2
DIV1 ____
DIV1 DIV3
____ DIV3
____ DIV3
____ DIV3
DIV4 ____
DIV4 ____
DIV4 ____
____ ____
____ ____

Div3 lines under Div2 but then Div4 is forced below the bottom of Div3 (as if Div4 was set to clear it).

I'd be grateful if someone could point me in the right direction. I'm sure I'm missing something obvious with regard to floating elements but I can't work out what it is. I've tried looking for info but everything I find is achieving a grid layout with consistent dimensions.

Regards,

John

[alfaguru]

When a floating element wraps it won't float up as you want. The float lefts are all trying to line up, left to right, then the DIV4 wraps round and starts a new row (a bit like word wrapping).

The right answer will depend on how much you know about the sizes of the divs in advance. A general solution might be quite tricky. Does the order of the divs matter, or do you just want to use the space effectively?

[edited by: alfaguru at 8:00 pm (utc) on Jan. 8, 2007]

[doodlebee]

I'm not a huge advocate of using tables (unless it's for tabular data) - so I'm curious as to why you aren't using tables for this?

[Benek]

I'm not completely sure I understand what you're trying to do, but would it help to start with each of the two columns as container divs floated side by side and then just putting the divs one after the other in there correct column?

[dwighty]

I agree with Benek.

If you have a left_col and right_col then you can just have a standard box_div with x amount of padding top,right,bottom,left as from your little layout each div (1,2,3,4) look to be of the same properties.