JQuery resizeable and dragable divs positioning problems

Question

I'm having trouble properly positioning some divs within a larger div and having them behave as I want.

The source and a preview is here: http://jsbin.com/usuniw/6/edit

Problem 1

When the hidden div is unhidden it appears under the div I want it to appear inside. Once the dive inside is resized (using a handle on the left hand side) it pops into place

Problem 2

When resizing the originally hidden div it moves outside the boundry of it's parent rather than aligning itself to the right-hand side of it.

Thanks for any help you can give.

Answer 1

At the moment, you have the #selectedResult element set as float right which is causing it to appear underneath the #ipad element.

If you get rid of the float:right on #selectedResult and instead set it to:

position: absolute; 
right:0; 
top:0;

And set the #ipad element to:

position:relative;

Then the element will be fixed to the top and right sides of its parent.

You can see an updated version of your example here: http://jsbin.com/uxavov/edit#preview