jQuery splitter issue div not resizing

Question

I am using a jQuery plugin for splitters at http://methvin.com/splitter/4psplitter.html. In my case I need two columns vertically split and inside of those two rows horizontally split. In other posts I have seen people mention using different plugins to achieve this, unfortunately, the decision was made by others to move forward with this plugin.

All of the splitters appear and are draggable, the vertical one works perfectly, however, the horizontal ones are draggable but they do not resize. Instead, the lower divs drag up and down, on top of the top div or creating a gap between them as if they are not bound. I will post my layout below.

One thing to note here that I found unreasonable is that while dragging the splitters, both types, I see max call stack exceeded error in the jQuery library (1.7.2), in the camelCase method.

Please let me know if more information is needed, I am at a total loss as to why these do not work.

The HTML:

<div id="splitContainer">
        <div id="leftSplitter">
            <div id="leftSplitterTopPane">
                <div class="webpartHeader" style="border-bottom: 5px solid white;">
                    <span class="webpartHeaderSpacer">Header</span>
                </div>
                <div id="LeftTop_Container" class="webpartBody" style="height: 200px; overflow: auto;">
                    <br />
                    <!--TopLeft-->
                </div>
            </div>
            <div id="leftSplitterBottomPane" style="border-right:5px solid white;">
                <div class="webpartHeaderBottom" style=" height:25px; border-top:5px solid white; ">
                    <span class="webpartHeaderSpacer">Header</span>
                </div>
                <div id="LeftBottom_Container" class="webpartBody">
                    <br />
                    <!--BottomLeft-->
                </div>
            </div>
        </div>
        <div id="rightSplitter">
            <div id="rightSplitterTopPane">
                <div class="webpartHeader" style="border-bottom: 5px solid white;">
                    <span class="webpartHeaderSpacer">Header</span>
                </div>
                <div id="RightTop_Container" class="webpartBody" style="height: 200px;">
                    <br />
                    <!--TopRight-->
                </div>
            </div>
            <div id="rightSplitterBottomPane">
                <div class="webpartHeaderBottom" style=" height:25px; border-top:5px solid white;">
                    <span class="webpartHeaderSpacer">Header</span>
                </div>
                <div id="RightBottom_Container" class="webpartBody">
                    <br />
                    <!--BottomRight-->
                </div>
            </div>
        </div>
   </div>

The CSS:

#splitContainer {
height: 469px;
width: 100%;
}

#leftSplitter {
height: 480px;
width: 100%;
}

#rightSplitter {
height: 480px;
width: 100%;
}

#leftSplitterBottomPane div {
overflow: auto;
}

#leftSplitterTop div {
overflow: auto;
}

#rightSplittertopPane div {
overflow: auto;
}

#rightSplitterBottomPane div {
overflow: auto;
}

#splitContainer div {
overflow: hidden;
}

.hsplitbar {
height: 5px;
background: #aaa;
margin-bottom: 2px;
}

.vsplitbar {
width: 5px;
background: #aaa;
top: 0;
}

#RightBottom_Container {
height:187px;
}

#LeftBottom_Container {
height:187px;
}

The Javascript:

 $(document).ready(function () {

    $("#leftSplitter").splitter(
     {
         type: "h",
         accessKey: "J",
         resizeToHeight: true,
     });

    $("#rightSplitter").splitter(
      {
          type: "h",
          resizeToHeight: true,
          accessKey: "P"
      });

    $("#splitContainer").splitter(
        {
            type: "v",
            outline: false,
            sizeLeft: 250,
            resizeToWidth: true,
            accessKey: 'I'
        });
});

Fixed during development; later refactored into different language. No longer relevant.

Answer 1

This was resolved. I fixed the issue by removing the inline styling of the height:200px on the container divs. This was later resolved with an upgrade to a higher version of jquery and other libraries with dependencies. WPF/XAML ended becoming the foundation for this, which made most of this irrelevant.