title: jQuery-ui draggable and resizable div can't resize from the left properly
body: <p>I am trying to make a resizable and draggable div that is at a fixed position.
  The div looks fine when I resize it from the right or bottom; however, when I resize it from the left or top, the draggable div seems to increase height/weight in the opposite position.</p>
  
  <p>Here is the code:
  HTML</p>
  
  <pre><code>&lt;div id="draggableDiv" &gt;
    &lt;div id="resizableDiv"&gt;
      &lt;div id="content"&gt;&lt;div id="contentTitle"&gt;&lt;/div&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code> $('#draggableDiv').draggable({
      handle: '#contentTitle'
    });
    $("#resizableDiv").resizable({
      handles: 'n, e, s, w, ne, se, sw, nw'
    });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>  #draggableDiv {
       position:fixed !important;
       width:auto;
       height:auto;
       left:100px;
       top: 100px;
     }
  
     #resizableDiv {
       height: 200px;
       width: 200px;
     }
  
     #content { height:100%; width:100%; }
  </code></pre>
  
  <p>What should I do to make the draggable div resizes itself correctly?</p>