DIV float left

[Murasaki]

Hi,

HTML(Strict):
<div id="bigbox">
<div class="box">Content</div>
<div class="box">Content</div>
(Many more divs with "box" class)
</div>

CSS:
#bigbox {
width: 100%;
}
.box {
width: 50%;
float: left;
}

I'm not sure if it can be done but I'm trying to float div.box (varies in height) left so that it stacks together and look like 2 columns of boxes. The problem is that the boxes in the 1st column depending on the height of each boxes, will leave a block of space between the box above it because it is aligned to the baseline of the previous box (in the 2nd column). Is there a way to get rid of those spaces? I've tried floating the divs right and the it stacked together tightly just like how I want with float left.

Thanks
Joe

[edited by: Murasaki at 12:47 pm (utc) on Feb. 17, 2009]

[swa66]

Can you reorder the divs inside or give them alternating attributes?

The pseudo :nth-child would also help to switch them between left and right alignment.

[Murasaki]

The boxes are generated by a wordpress plugin.

I ended up solving the problem using jQuery and have the divs switch between left and right as you suggested.

Thanks
Joe