Here is a typical 3-pane layout with the splitter occupying all the area below this header. The page scroll bars have been removed since all the content is inside the splitter, and the splitter is anchored to the bottom of the window using an onresize event handler.
This is the left pane of the 3-pane splitter. It has been limited to a range of 100 to 300 pixels wide with the minA/maxA properties of the plugin. It starts at 150 pixels wide because of the initA property. (These could have been set through the stylesheet too.)
Essentially, a 3-pane splitter is just a vertical splitter with a horizontal splitter nested in the right-hand side. This same technique can be used to create multiple vertical and/or horizontal splitter layouts.
This is the top-right part of the 3-pane splitter. It starts at 150 pixels because the height of #TopPane was set in the stylesheet. The stylesheet has also set min-height: 75px so it can't get any smaller than that.
The splitbars are keyboard-accessible. Use Alt-Shift-| (vertical bar) to select the vertical splitbar, or Alt-Shift-_ (underscore) for the horizontal one. Then use the arrow keys to move the bar. The plugin lets you specify any key, but these seem pretty mnemonic!
This is the bottom-right part of the 3-pane splitter. It can't get any smaller than 100 pixels tall--because the stylesheet says so, that's why.
Notice that the #MySplitter element is set to min-width: 400px, so some of the splitter will be out of sight if you try to resize the browser window too narrowly. Similarly, it has min-height: 300px so the splitter won't perform an impossible act--like setting itself to a negative height if window is resized above the top of the splitter!
See the code in this page for more information.