Question

let say there are three column in a container, if i minimize the width of any element then adjacent element should cover the area by maximize it’s width. my live example on jsfiddle
What i want :
1. if any element resize (minimize or maximize) then adjacent element should auto adjust the width
2.container has fix size and should not be change the dimension
3. element must be auto fit inside the container
is there any way to use handler e.g. jQuery uses in it’s layout ui-resizable-handle

   <div id = "container">
      <div id = "element1"> </div>
      <div id = "element2"> </div>
      <div id = "element3"> </div>
    </div>


    #element1 {width:30%; height:100;}
    #element2 {width:40%; height:100;}
    #element3 {width:30%; height:100;}

Answer 1

I suggest, remove padding, margin, and border in #element1, 2, 3.

Maybe this will help.

$(function() {

    var startwidth = 0;
    var containerwidth = $('#container').width();

    $('.resize').resizable({
        containment:'#container',
        start: function(){
            startwidth = $(this).width() / containerwidth;
        },
        stop: function(event, ui){
            var nsiblings = $(this).siblings().size();
            var delta = ($(this).width() / containerwidth  - startwidth);
            $(this).siblings().each(function(){
                var siblingswidth = ($(this).width() / containerwidth - delta / nsiblings) * containerwidth;
                $(this).width( siblingswidth );
            });
            var totalwidth = 0;
            $('#container').children().each(function(){
                totalwidth = totalwidth + $(this).width();
            });
            if(totalwidth > containerwidth){
                $(this).width($(this).width() - (totalwidth - containerwidth));
            }
        }
    });
});