title: JQuery UI resizable() changes width when resizing the height
body: <p>I have a problem here with resizing. I'm using the JQuery <code>.resizable()</code> on a div with the following css:</p>
  
  <pre><code>div#resizable {
     float: left;
     border: solid 1px white;
     box-shadow: 0px 0px 0px 1px #F2F2F2;
     box-sizing: border-box;
     padding: 15px;
  }
  </code></pre>
  
  <p>It also contains lots of other divs and other stuff. I attach the <code>resizable</code> this way:</p>
  
  <pre><code>$( "#resizable" ).resizable({ minWidth: 200, 
                                maxWidth: 597, 
                                minHeight: 240,
                                resize: widgetResizeListener 
                              });
  </code></pre>
  
  <p>The <code>widgetResizeListener()</code> just logs something in console for now.</p>
  
  <p>Now when I'm trying to change the div's height by dragging it's <code>ui-resizable-s</code> side,  it automatically changes the div's width by about <code>30px</code>. It happens every time when I <strong>start dragging</strong>. And so the desired width is lost every time. 
  The same thing happens with height when changing the width.</p>
  
  <p>Now I wonder if that's because of the padding my div has? Because before, when there was no padding, such "jumpy" things would not happen. Now I cannot remove the padding as it's really needed. So how this problem can be solved? I mean is there a way to <strong>include the padding</strong> in <strong>JQuery resizable()</strong> ?</p>
  
  <p>Any help will be appreciated, thanks...</p>