How can I chronologically stack different height divs in two columns?

Question

I have two columns and want to stack divs of different heights in order of appearance.

The divs are dynamically created.

I have tried to do this by floating the first story to the left and the second to the right, but their still seem to be some anomalies.

Have a look at this demo, it should explain it all.

http://dl.getdropbox.com/u/142343/divstack.html

Answer 1

Try to use "clear:left" for floated to left and "clear:right" for floated to right.

You cannot create two columns without empty space between with that HTML structure.

If you want two columns without empty space, then you need to generate different structure - place odd elements in one column and even in other.

Answer 2

Put them in a table with two cells. (Yes, yes, flame away!)

Added: To clarify: what I meant was this:

<table>
    <tr>
        <td>
            <div>First DIV</div>
            <div>Third DIV</div>
            <div>Fifth DIV</div>
        </td>
        <td>
            <div>Second DIV</div>
            <div>Fourth DIV</div>
            <div>Sixth DIV</div>
        </td>
    </tr>
</table>

Throw in some width and padding settings, and you'll have two neat little stacks.

Now, looking at your examples I think I realized something else yet. You want the <div>'s to arrange automatically in such a way that both stacks are as equally sized as possible. I don't think that's possible.

Well, you might try to render them, and then check their heights with JS, and rearrange them... but this will cause some nasty flickering in the browser.

Added 2: Check the link: http://valts.21.lv/problem/DivStack.html

Answer 3

I'm not sure if this is the desired effect you are going for, but try using

.left {
  float:left;
  clear:both;
}
.right {
  float:left;
}

as your CSS for left and right.