JQuery/Javascript to keep Absolutely Positioned div in place with browser zoom

Looking at this layout, I want to use jQuery/Javascript to put the Red Box, in the Gray Container u开发者_如何学JAVAnder the left small Blue Box whether zooming in or out with any browser.

I am trying to accomplish this by NOT putting the redbox #badplacement div inside the Gray Container's #outerwrapper div. Any idea how this can be accomplished?

(To start, I change the #badplacement css left to 243px, on normal browser zoom level, where it is under the small blue box.)

Fiddle: http://jsfiddle.net/Q56up/

---

Clone the outerwrapper div with css rules but without background and place it over the original (position:absolute, z-index:1). Put Red Box inside and position it relative.