Expand one div to cover another div


I'm using jQuery to expand a div while hovering it so it covers the entire width of the page. It contains a large table and I'm required to build for a low resolution but in reality everyone has a higher so this is an accepted workaround. My problem is that the div "jumps" down below the other divs instead of covering them as I would like it to. Anyone know how this can be achieved?

I've created a jsfiddle of it so you get the main idea: http://jsfiddle.net/MRNxt/1/

Hover the grey box and make it expand to the right covering the #asd2 in the sidebar instead of below it.

Problem courtesy of: olofom


Check this fiddle: http://jsfiddle.net/MRNxt/4/

The solution involves adding absolute positioning to the log div when expanding and taking it out when collapsing. Also included is a small fix to avoid flickering while animating.

Solution courtesy of: techfoobar


This won't be the perfect answer:


but here I used a subContainer to allow you to have a 100% width and some border.

Discussion courtesy of: BiAiB

Add this css:


Example: http://jsfiddle.net/MRNxt/2/

Discussion courtesy of: Puyol

Is there a reason that using something like lightbox/thickbox isn't suitable?

Alternatively, you will need to play around with absolute positioning and z-index. I'd advise figuring out your ideal layout before working on the animation. Put it together in CSSEdit/Firebug/whatever so that your boxes are exactly where you want them to be and then it will be simple to add to the animation script.

Or just use an off-the-shelf lightbox.

Discussion courtesy of: Charles Bandes

This recipe can be found in it's original form on Stack Over Flow.