Splitter conserving size

Question

I try to do a splitter like this one using 'JQuery UI': jsfiddle.net/8qzTJ/

HTML

<div class="wrap">
    <div class="resizable resizable1"></div>
    <div class="resizable resizable2"></div>
</div>

JS:

$(function () {
    $(".resizable1").resizable({
        handles: 'e',
        minWidth: '50',
        maxWidth: '350',
        resize: function() {
            var remainingSpace = $(this).parent().width() - $(this).outerWidth(),
                divTwo = $(this).next(),
                divTwoWidth = remainingSpace - (divTwo.outerWidth() - divTwo.width());
            divTwo.width(divTwoWidth);
        }
    });
});

CSS:

.wrap {
    width: 400px;
    border: 1px brown solid;
    font-size: 0;
}
.resizable {
    width: 200px;
    height: 120px;
    padding: 0.5em;
    background-color: coral;
    display: inline-block;
}
.resizable2 {
    background-color: olive;
}

But I want that the other part (the one that is not directly resized) keeps its size and gets pushed.

Any idea?

Thanks =)

Answer 1

Did you mean something like this: http://jsfiddle.net/8qzTJ/1106/

I've removed the width of the wrapper div

.wrap {
    /*width: 400px;*/
    border: 1px brown solid;
    font-size: 0;
}

In the js, I've commented the code that changes the width of the second div:

$(function () {
    $(".resizable1").resizable({
        handles: 'e',
        minWidth: '50',
        maxWidth: '350'/*,
        resize: function() {
            var remainingSpace = $(this).parent().width() - $(this).outerWidth();
                divTwo = $(this).next();
                divTwoWidth = remainingSpace - (divTwo.outerWidth() - divTwo.width());
            divTwo.width(divTwoWidth);
        }*/
    });
});