Two problems resizing a div

I have a page with a 2 column structure.

I want to make one of the two column (a div) resizable using jQuery resize function (http://api.jquery.com/resize/) but i have two problems:

1. when the left column is resized I want the right one to change a css parameter in relation to how many px the other column has been resized: for example I want to add 3px to the margin of the right column when the left column grows by 3px?

2. I want to make the div resizable only horizonta开发者_如何学运维lly and to resize it not using the "resize are" in the bottom-right corner but using a line on the border.

I'll only post the css code because the html one seems to be "executed", but there are simple two div .sidebar and .content

.sidebar{
width: 220px;
float: left;
position: fixed;
margin-bottom: 0px;
padding-bottom: 0px;

overflow:auto;
}

.content{
float: right;
position: fixed;
padding-left: 220px;
overflow: auto;
}

I dont understand your problem, but I guess that you are actually using jQuery UI Resizable (http://jqueryui.com/demos/resizable/), instead of jquery resize (which is an event and not a feature to resize elements). If that is the case, you can define a callback function, that can be fired when your resizing is done.

something like this:

var onResized = function(){
  $("#seconddiv").css("width", 300 + (300-$("#yourdiv").width()) +"px" );

};

$("#yourdiv").resizable(stop:onResized);

In this example, i assume your divs are by default 300 pixels with, so the same amount that one div has been increased, is substracted from the other.

If you dont want to allow vertical resizing, you can add a callback like this:

$("#yourdiv").resizable({
    resize: function(event, ui) {
        ui.size.height = ui.originalSize.height;
    }
});

or you can set minHeight and maxHeight to the same value like this:

$("#yourdiv").resizable({
    minHeight: 555, maxHeight:555
});

If you are not using Resizable, then I dont understand your question.

Hope it helps :-)

I dont quite get the problem - resize should be done automatically.

For changes to css use: .css()

For width/height .width() and so on for jQuery

Here is your example: http://jsfiddle.net/9WwLC/

You might want to use such, to explain your problem or post usable examples.