Why do sibling divs jump to new line when resizing?

Question

I have multiple divs on a container div, like this:

<div id="container">
    <div class="resizable"></div>
    <div class="resizable"></div>
</div>

and they need to be resizable. With jQuery I could achieve the resizable thing, but now, I have found a "thing".

When I resize any column, if one or more siblings reach to the limit of the "container", they jump to a new line instead of stop the resizing. You can see an example here.

I want to stop the resizing when the las sibling reach the parent limit. I tried it so many times and there is none post that talk about it, and none of the workarounds I've made seen to work.

Answer 1

I've added white-space: nowrap; to your container to prevent the elements of breaking down.

Now to control your resize based on multiple elements, all I can think of is adding a js threatment on the resize event, telling to keep the size when the sum of the children's width reach the parent's width, like this:

$('.resizable').resizable({
    handles: 'e',
    containment: '#container',
    resize: function( event, ui ) {
        var parent = ui.element.parent();
        var cw = 0;
        ui.element.siblings().each(function() {
            cw += $(this).width();
        });

        if(parent.width() <= cw + ui.element.width()) {
            ui.element.width(
                parent.width() - cw
            );
        }
    }
});

This will keep all items inside the container's limit. You just have to deal with the padding between your items, that are due to inline-block

Here's the fiddle: http://jsfiddle.net/Yz9K2/2/