Flow from bottom right to top left

Hi folks,

I’m trying to develop a layout where new elements added to a page appear at the bottom right, and other are added flow left and then up.

Currently, they flow left until the ‘row’ is filled, then that row is pushed up as it were. Excuse the poor explanation, I find these things are easier to demonstrate than describe.

The layout I have presently:

[URL=”http://creativeinterweb.co.uk/layouttest/layout.html”]Current layout[/URL]

Sample divs can be added by clicking the small ‘Add’ button on the bottom left.

The flow as it occurs now is illustrated in the attached currentlayout.gif image, the flow as I would like it is illustrated in the attached desiredlayout.gif image.

IE does something completely different as usual, but that aside, can anyone suggest how I might achieve this, or even if it is possible without calculating and applying positions in JS?

Many thanks,

Baps.

[upl-file uuid=07198431-d264-4a73-8c80-6c33320a2d07 size=4kB]currentlayout.gif[/upl-file]

[upl-file uuid=ea3dbc78-3d26-44ba-a10b-52a6a56b05af size=4kB]desiredlayout.gif[/upl-file]

Also in #CSS _↴