Auto-Resize or Auto-Position Functionality with Draggable&Resizable divs?

Auto-Resize or Auto-Position Functionality with Draggable&Resizable divs?


Version: jQuery 1.3.2
I am dynamically creating draggable/resizable div elements (divInner
[x]) and appending those to a draggable parent div (divOuter). What I
would like is:
1. each divInner[x] to have its resizable borders auto shrunk to fit
the text or image that is contained within it.
2. each divInner[x] to be auto positioned within divOuter such that
divInner[1].top = 0, divInner[2].top = (divInner[1].top + divInner
[1].height), etc.
Currently I can get 1 XOR 2. I am instantiating each divInner with:
$(divInner).draggable().resizable();
I can get behavior 1 when I set:
$(divInner).css("position", "absolute");
but then each divInner's top = 0 (they are all stacked on top of each
other).
I can get behavior 2 when I don't set .css("position") to anything,
but then each divInner's border is as wide as divOuter. Furthermore,
each divInner's border exhibits jumpy behavior when first resizing it.
For example, if divOuter.width = 10, then divInner.width also equals
10 even though the width of text within divInner is only 5. When I
grab divInner's east resize handle the first time, mouseX is at 10 and
divInner.width is still at 10. Then as soon as I move the mouse to the
left, divInner.width jumps to 4 and mouseX is at 9. Also, for all of
the other sibling divInner's that are not being resized, the tops are
set to 0 at this point.
Any ideas how to get BOTH 1 and 2?
Are these bugs or am I just doing something wrong?
Thanks,
bluetrain