Problems with floating a box underneath a resizable box
Hey everybody,
I am trying to accomplish the following:
1. I have a table which is on the left of a wrapper floated to the
left.
2. I have a box (A) which is within the wrapper but floated to the
right, so that it displays just next to the table.
3. The box A is made resizable.
4. Now I want it to be resizable onl to the south, west and southwest
and when it overlaps the table, the table should snap underneath box
A.
I played a lot with floating..as in removing floating from the table,
proportionallyResizing the table and what not. The real problem that I
see is, that #inner needs position:absolute; for the resizing to work
(figured this out from the resizing demo located here:
http://dev.jquery.com/view/trunk/ui/current/demos/ui.resizable.html),
but that will make it overlap the table when resizing.
Thanks a lot for your help. : ) I really tried much different stuff,
but I waste too much time with this, so I ask for help here.
--------
Here is some code:
HTML:
<div id="wrapper">
<table class="products">
<tr>
<th class="product">Product</th>
<th class="price">Price</th>
</tr>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
</table>
<div id="box"></div>
</div>
CSS:
table.products{margin: 0.8em 0; clear: left; border-spacing:
0;float:left;}
#box{margin:70px 0 0 380px;position:relative;}
#inner{display:block;position: absolute;background-color:#f1ef99;width:
360px;height:300px;border: 1px solid #ccc;}
Jquery:
$('<div class="wrap1">'+
'<div class="wrap2">'+
'<div class="wrap3">'+
'<div id="inner">'+
'<div class="ui-resizable-s ui-resizable-handle"></div>'+
'<div class="ui-resizable-w ui-resizable-handle"></div>'+
'<div class="ui-resizable-sw ui-resizable-handle"></div>'+
'</div'+
'</div>'+
'</div>'+
'</div>').appendTo('#box');
$('#inner').resizable({
minHeight:250
, minWidth:200
, maxHeight:500
, maxWidth:750
, autohide: true
, proportionallyResize: ["table.products"]
});