jQuery unpleasant Draggable, Resizable interaction

When I resize the first div it causes the next div to jump 'up' the column.

To recreate: top div drag the resize handle.

jQuery $(function() { $('.portlet').draggable({ grid: [25, 25] }).resizable({ grid: [25, 25] })开发者_开发技巧; });

Layout

<div class="portlet" id="P2">
    <div class="portlet-header"><h3>News</h3></div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class="portlet" id="Div1">
    <div class="portlet-header"><h3>Feeds</h3></div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>

CSS

.portlet { min-width: 100px; min-height: 100px; width: 100px; height: 100px; background-color: #C0C0C0; }

Give #Div1 an absolute positioning of top:100px and it should stay put when resizing #P2. On initial resize of #Div1 it's inline positioning becomes changed and the browser bumps up #Div1 as you describe.