Images and resizable plugin

Images and resizable plugin

I was having problems using resizable on an <img /> element.  I found that if the image is set to float, when resizable is bound, the image is moved left, or even in the center like in the example I created below.
 
  1. <!DOCTYPE html>
    <html>
    <head>
      <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
      <style type="text/css">
        #resizable { width: 100px; height: 100px; background: silver; float:right; }
      </style>
      <script>
      $(document).ready(function() {
        $("#resizable").resizable();
      });
      </script>
    </head>














    <body style="font-size:62.5%;">

  3. <div style="width:600px; height:600px; border:2px solid red;">

  4. <img src="someimage.jpg" id="resizable" />

  6. </div>

  7. </body>
    </html>


    Any ideas?