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.
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.
This recipe can be found in it's original form on Stack Over Flow.