Ajuste el ancho de 2 divs usando jQuery-dimensionable

Question

Actualmente trabajo en la siguiente página:

divResizable ha sido modificado por jQuery usando el siguiente código en $().ready()

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

Como puedes ver, trato de aumentar el ancho de divContent cuando divResizable se hace más pequeño y viceversa. Sin embargo, con este código, divContent no siempre "crece" hacia el lado izquierdo solamente, a veces se extiende hacia el lado derecho del div irrelevante, lo que no hace que el cambio de tamaño se vea bien.

¿Hay alguna entrada para un método más sofisticado para que corresponda el ancho de esos 2 divs?

Algo que podía pensar sería la de establecer el ancho de divContent a

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

¿Cómo funciona exactamente iba a hacer esto utilizando jQuery?

Answer 1

Demo - Su diseño puede manejar esto. Si envuelve resizable y content juntos, sólo tiene que ajustar resizable 's ancho:

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

trate de envolver 'divresizable' y 'divContent' en un div con ancho conjunto a la suma de los dos contenían divs

Answer 3

Prueba esto:

$("#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); 
    });