javascript - jQueryのサイズ変更可能なdivの移動

Question

サイズ変更可能な 3 つの div を含むページを作成しようとしています。最初のものは左側にあり、「middle_explorer」と呼ばれます。2 つ目は下部にあり、「middle_console」と呼ばれます。

問題は、2 番目と最後のサイズを変更しようとすると、本来あるべき場所に移動しないことです...ここで自分で見てください

ここに私のページがあります：

<header>
        <div id="header_logo">header_logo</div>
        <div id="header_controls">header_controls</div>
    </header>
    <section id="middle">
        <div id="middle_controls">middle_controls</div>
        <div id="middle_workarea">
            <div id="middle_explorer" class="sidebar">middle_explorer</div>
            <div id="middle_main">
                <div id="middle_codecontainer">middle_codecontainer</div>
                <div id="middle_console">middle_console</div>
            </div>
            <div id="middle_info" class="sidebar">middle_info</div>
        </div>
    </section>
    <footer>
        <div id="footer_date"></div>
    </footer>

#middle_main の幅など、いくつかの css プロパティは js によって設定されます。これが私のcssです：

#middle_info{
    width: 150px;
    max-width: 250px;
    float: left;
}
#middle_codecontainer{
    /* Width is determined by acpUi.js */
}
#middle_console{
    width: 100%;
    height: 25px;
    background: white;
    padding: 2px;
}
#middle_main{
    /* Width is determined by acpUi.js */
    height: 100%;
    float: left;
    background-image: url('res/bkg02.png');
    background-attachment:fixed;
}
#middle_workarea{
    /* Height is determined by acpUi.js */
}
#middle_explorer{
    width: 200px;
    max-width: 400px;
    float: left;
}

そして、ここに私が話していたコードがあります：

/* Adjust the #middle height according to the header and the footer */
function middleHeight () {
    $("#middle").height($(document).height() - $("header").height() - $("footer").height());
}
/* Adjust the #middle_workarea height according to the #middle_controls div height (37px) */
function workareaHeight () {
    $("#middle_workarea").height($("#middle").height() - 37);
}
/* Adjust the #code_main width according to the #middle_explorer, #middle_info */
function mainWidth () {
    var width = ($("#middle_workarea").width() - $("#middle_explorer").width() - $("#middle_info").width());
    $("#middle_main").width(width);
}
/* Adjust the #middle_codecontainer height */
function codecontainerHeight (){
    var height = ($("#middle_workarea").height() - $("#middle_console").height());
    $("#middle_codecontainer").height(height);
}

divのサイズを変更できるようにするために使用したコードは次のとおりです。

$("#middle_explorer").resizable({ handles: "e"});
$("#middle_info").resizable({ handles: "w"});
$("#middle_console").resizable({ handles: "n", maxHeight: $("#middle_codecontainer").height()});

ご覧のとおり、 #middle_explorer はサイズ変更中に左に固定されたままですが、他の2つはそうではなく、何が間違っているのか本当にわかりません。