JQuery UI: Is there a way to make a Resizable div's height get taller when it's width gets smaller?

Question

I have 2 divs (myDiv1 and myDiv2) that is located within another div (otherDiv) which is ultimately located inside an asp:TabPanel. I am using JQuery IU's Resizable function (which can be seen here: http://jqueryui.com/demos/resizable/) on myDiv1. myDiv1 can only be resized width wise. My dilemma is that the div's height does not resize when the width is shortened and the content spills out the bottom.

<script type="text/javascript" language="javascript">
     $(document).ready(function () {
        $('#myDiv1').resizable({ handles: 'e' });
    });
 </script>

 <asp:TabPanel>
     <div id="otherDiv">
         <div id="myDiv1">
             ... Some Stuff ...
         </div>
         <div id="myDiv2">
             ... Some Other Stuff ...
         </div>
     </div>
 </asp:TabPanel>

Anyone have any suggestions?

Answer 1

The resize event can be used to execute your own code whenever the user resizes the element. From here you can calculate the width and modify the height.

$("something").resizable({
    // ...
    resize: function(event, ui){
        // do stuff here
    },
    // ...
});