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.
I'm not sure if this is the desired effect you are going for, but try using
as your CSS for left and right.
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.
Put them in a table with two cells. (Yes, yes, flame away!)
Added: To clarify: what I meant was this:
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