Question

Here is my jsfiddle

http://jsfiddle.net/WLJUC/

notice how when you click to rotate the larger container overlaps the smaller one.

this is problematic because im trying to create a picture gallery of sorts where you can click to rotate and enlarge images. this wouldnt be a problem but some images are very long and skinny. I’d prefer if the rotated div were to push down the div below it, and not overlap.

any ideas?

Answer 1

Ok, so the blue should never touch the red. Here’s an example of using margin to drop the blue guy: http://jsfiddle.net/WLJUC/27/

I don’t know the details of you photos to get the example perfect, but in general you can check via JS the rotation, and then use a margin on the blue div to bump it down a certain amount. (Threw in some transition just to visualize it a bit better)

(Old, useless answer) You have a tag for z-index, yet you didn’t use it in your example. Applying position relative to both, z-index: 0 to the red one and z-index: 1 to the blue will stop the overlap from my quick test: http://jsfiddle.net/WLJUC/10/