CSS3 Transition to not effect other elements?

Question

Is it possible to have height transitions that don't affect the position of nearby elements?

This particular case involves divs with float:left.

Demo: http://ashleystewart.me/

I'd like the hover transition to go on top of the element you can see moving around.

Answer 1

Give the container boxes Relative positioning and the fly-out details box Absolute positioning. Since Absolute positioned elements are removed from the layout, it wont interfere with the floats.

demo: http://dabblet.com/gist/3729269

Answer 2

I'm afraid that in the current layout-logic you're following, it'd be very hard to fix.

Why? Because like your floats in the first row are aligned next to each other, when a box in the upper row is expanded on :hover, the floats in the bottom row will reposition relatively to that one as well.

Here's how I would go about achieving your idea:

• Don't use floating, use something like display: inline-block;.
• Your semantic article wrappers are causing issues when using inline-block;. Either get rid of them (oops, might not be SEO friendly), or make sure you aren't relying on overflow: hidden; when styling your "boxes."

Sorry I couldn't be of more help!