Adjust the width of 2 divs using jQuery-Resizable

Question

I currently work on the following page:

divResizable has been modified by jQuery using the following code in $().ready()

 $("#divResizable").resizable({ handles: 'e' });
 $("#divResizable").bind("resize", function (event, ui) {
      $('#divContent').width(850 -(ui.size.width - 175));
 });

As you can see, I try to increase the width of divContent when divResizable gets smaller and the other way around. However, with this code, divContent doesn't always "grow" to the left side only, it sometimes extends to the right side to the irrelevant div, which doesn't make the resizing look good at all.

Is there any input for a more sophisticated method to let the width of those 2 divs correspond?

Something I could think of would be to set width of divContent to

(start of irrelevant - divResizable.width) == 850px
  ^ e.g 1025px          ^ e.g. 175px

How exactly would I do this using jQuery?

Answer 1

Demo - Your layout can handle this. If you wrap resizable and content together, you only need to adjust resizable's width:

HTML

<div id="page">
  <div id="wrapper">
    <div id="resizable">resizable</div>
    <div id="content">content</div>
  </div>
  <div id="irrelevant">irrlevant</div>
</div>

CSS

#resizable  { float:left; width:175px; }
#content    { overflow:hidden; width:auto; }
#wrapper    { float:left; width:1025px; }
#irrelevant { }

Answer 2

Try this:

$("#divResizanle").resizable({ handles: 'e' });
    $("#divResizable").bind("resize", function (event, ui) {
        $('#divContent').width(850 -(ui.size.width - 175));
        $('#divContent').css("left",ui.size.width - ui.originalSize.width);
    });

Answer 3

try wrapping 'divresizable' and 'divContent' in a div with width set to the sum of the two contained divs