Here is a 4-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 the .
This is the left pane of the 4-pane splitter. It has been limited to a range of 100 to 300 pixels wide with the minLeft and maxLeft properties of the plugin. It starts at 150 pixels wide because of sizeLeft property.
All of the other panes are created by nesting two horizontal splitters in the right pane of this vertical splitter.
To move the vertical splitbar using the keyboard, use the "L" accelerator key (Alt-Shift-L in IE and Firefox).
This is the top-right horizontal pane. It tries to stay at its current size if you resize the bottom horizontal splitbar.
The splitbars are keyboard-accessible. Use Alt-Shift-V to select the vertical splitbar, or Alt-Shift-H for the horizontal one. Then use the arrow keys to move the bar. The plugin lets you specify any key for the access key, but be sure to test on all browsers in case they reserve those keystrokes.
To move the horizontal splitbar below this pane using the keyboard, use the "V" accelerator key (Alt-Shift-V in IE and Firefox).
This is the middle-right pane, which starts at a height that varies depending on the height of the browser window. Since the top pane has sizeTop: 100 and the bottom pane has sizeBottom: 120, this pane gets whatever is left over. The overall size of the splitter has been set to min-height: 300px in the style sheet, so it will be at least 80 pixels high.
This is the bottom-right pane of the splitter. It tries to stay at its current size if you resize the top horizontal splitbar.
To move the horizontal splitbar above this pane using the keyboard, use the "J" accelerator key (Alt-Shift-J in IE and Firefox).