title: jQuery UI draggable with absolute position and bottom property
body: <p>I am using jQuery UI to create a draggable <code>&lt;div&gt;</code>.  The <code>&lt;div&gt;</code> is absolutely positioned to the bottom-right or top-left using CSS:</p>
  
  <pre><code>.dragbox {
      position: absolute;
      width: 140px;
      min-height: 140px; /* I need to use min-height */
      border: 3px solid black;
      padding: 10px;
  }
  .bottom {
      bottom: 5px; /* causes box to resize when dragged */
      right: 5px;
  }
  .top {
      top: 5px; /* does not cause box to resize */
      left: 5px;
  }
  </code></pre>
  
  <p>The HTML looks like this:</p>
  
  <pre><code>&lt;div class="dragbox bottom"&gt;
      Bottom Box :(
  &lt;/div&gt;
  &lt;div class="dragbox top"&gt;
      Top Box :)
  &lt;/div&gt;
  </code></pre>
  
  <p>The JavaScript is <code>$('.dragbox').draggable();</code> to make the <code>&lt;div&gt;</code> elements draggable.  The top-left <code>&lt;div&gt;</code> works as expected, but the bottom-right <code>&lt;div&gt;</code> resizes when dragged.  If I change the <code>min-height</code> poperty of <code>.dragbox</code> to <code>height</code> I see the expected behavior for both boxes, but I need to use <code>min-height</code> for this because I don't know the length of the inner content.</p>
  
  <p>How do I position the <code>&lt;div&gt;</code> in the bottom-right and enable dragging without having the <code>&lt;div&gt;</code> resize when dragged?  The top-left and bottom-right <code>&lt;div&gt;</code> elements should behave the same way.</p>
  
  <p><a href="http://jsfiddle.net/ChrisP/expqj/5/" rel="noreferrer">DEMO</a>  (I use Chrome 27 and Safari 6)</p>