Setting two element's position(relative) using javascript and css - Stopping them move across

Question

I'm having trouble with setting 2 div's position without one of them moving to the right/left the width of the other div. They push any elements either side over by they're own width.

What I mean by this, a visual:

How can I stop this from happening, whilst keeping both of the divs relative?

EDIT:

I realize, absolute is right for what I need as found here http://css-tricks.com/absolute-positioning-inside-relative-positioning/ . However... I need them to be draggable, but if the #wrapper is set to relative, then they can't be dragged. Is there a way to make the elements so that they can be draggable with the #wrapper being relative?

Link to example http://jsfiddle.net/QddTt/13/

Answer 1

Found out the problem. My wrapper had z-index:-99; in there for some reason. Removing that allowed me to drag my elements when the wrapper was static.

So the main solution: setting the position to absolute for both elements.