CSS transition when moving float

Question

I am working with something like this: http://jsfiddle.net/Hh2Ht/

As you can see, I have a group of floating divs with the same width but with different heights. However, the container has a percentage width and as a consecuence, when its size changes, floating divs change their position.

I would like this position change to be animated using css transitions. I could do this with absolute positioning, a bit of javascript to calculate the positioning and snap the transition effect to the top and left props, but since I want to emulate the behavior of the float div exactly, it would be great to do this without absolute positioning.

Do you think this is possible? Thank you in advance.

Answer 1

I'm really not sure that you can move blocks as described using pure CSS. Mostly because some of the blocks need to be moved to another location in the DOM, which is not possible with CSS.

Have you tried using the Isotope plugin? Check out their website, perhaps what you are looking for.