Hey, i have my main container for my site centered using margin:0 auto

But I want the container to be user expandable, I have incorporated the jQuery UI feature resizable. The problem is the plugin works when the expanding container has a fixed left side.

When I pull the left side the container expands the distance moved with the mouse but because it centers itself it actually only goes ½ the distance the user selected.

Here is my code:
Code:
$("#resizable").resizable({
    minWidth: 976,
    animate: true,
    handles: 'e, w',
    stop: function (event, ui) {
        $.namesession.set('pageWidth', $('.ui-resizable-helper').width());
    },
    resize: function (event, ui) {
        var offset = (ui.originalSize.width - ui.size.width) / 2;
        //console.log($.dump(ui));
        if (ui.originalPosition.left != ui.position.left)
            offset = offset * -1;
        $('.ui-resizable-helper').css('margin-left', offset + 'px');
    },
    ghost: true
});
you can see I put a little trick in there with negative margins so when the user is pulling out to expand the opposite side increase also. Although better I still have the problem of my dotted line only being ½ the distance the user is actually pulling. The plugin increases the side of the container equil to the increased distance the user is pulling (open) but because I am expanding on both side I need the container to increase @ a rate of 2x the user pulling, I have tried a few different hacks but am not getting anywhere. Ive looked in the plugin code but im not able to figure out where the change needs to be made to double it.

Sorry for the brief description, its difficult to describe and my development environment is pass protected, so I can’t provide a link.

-aPeg