change width of a div on the fly, setting with $('#contentDiv').width(newWidth) does not work

Question

I have 3 divs arrranged like -

    --------------------------
    |  f      |  headlineDiv  |
    |  i      |               |<- draggable and resizable
    |  l      |_______________|
    |  t      |               |
    |  e      |               |<- draggable and resizable
    |  r div  |  storyDiv     |
    |--------------------------
        ^
        |
    can be hidden

Heres some code :

 <div id="main">
    <div id="showFiltersDiv">
    </div>
    <div id="filtersDiv">
        <div id="hideTextDiv">
        </div>
    </div>
    <div id="contentDiv">
        <div id="headlineDiv">
            Block 1</div>
        <div id="storyDiv">
            Block 2</div>
    </div>
</div>

heres the jquery code: for Resize ->

            $('#headlineDiv').resize(function () {
            var offset = $('#headlineDiv').position();
            var height = $('#headlineDiv').height();
            var width = $('#contentDiv').width();
            var top = offset.top + height + "px";
            var newStoryHeight = $("#main").height() - $("#headlineDiv").height();
            var maxHeight = $("#main").height();

             $('#storyDiv').css({
                'bottom': 0,
                'height': newStoryHeight,
                'top': top,
                'position': 'absolute',
                'width': width
            });

            $('#headlineDiv').css({
                'max-height': maxHeight,
                'width': width
            });
        });

The code for #storyDiv is similar

Heres the code that should make them expand to fit the extra space -

             $('#showFiltersDiv').click(function () {
            $('#filtersDiv, #hideTextDiv').show("slide", { direction: "left" });
            $('#showFiltersDiv').hide();
            var left_margin = $('#filtersDiv').width();
            var perm_width = $('#main').width() - left_margin;               
            var storyTop = $('#storyDiv').position().top;
            $('#headlineDiv').width(perm_width);
            $('#headlineDiv').css({
                'float': 'right',
                'left': $('#main').width() - perm_width,
                'position': 'absolute'
                //'width': perm_width
            });

            $('#storyDiv').css({
                'float': 'right',
                'left': $('#main').width() - perm_width,
                'position': 'absolute',
                'width': perm_width
            });
        });

when headlineDiv is resized, storyDiv should adjust its height accordingly. Their positions are interchangeable. So if the user drags storyDiv above, headlineDiv will be placed below it. Hence, then if storyDiv is resized, headlineDiv will adjust it's height accordingly. For some reason, when the user tries to resize either, their width decreases by around 10px. To fix this, i set the width of these divs to be equal to their parent in the resize function.

Now, filterDiv is a toggle div. So when a user hides it, headlineDiv and storyDiv should expand on the left and occupy the new space. To do that, I'm changing their width. However, setting the width with $('#headlineDiv ').width(newWidth) has no effect. Any suggestions on what could do the trick?

Answer 1

Use jQuery UI resizeable. It has options for "alsoResize" built right in. Since rules you are providing aren't clear you can write a simple function in "alsoResize" yourself

http://jqueryui.com/demos/resizable/