I have created a jQuery plugin for adding split panes to you web site or web application.

Split panes can be nested. Component min-widths and min-heights are supported. I have not implemented support for max-width and max-height, yet.

I’ve tested the code in the latest versions of Chrome, Firefox and Safari on OS X, and in IE8 on XP.

The source code can be found at github.

It’s only version 0.3, so there will probably be some changes in the near future. Please give me you feed back!

Check out the following pages for examples on how to use it:

• Vertical divider with left component fixed
• Vertical divider with right component fixed
• Vertical divider with right and left component widths in percent
• Horizontal divider and top component fixed
• Horizontal divider and bottom component fixed
• Horizontal divider and top and bottom component widths in percent
• Nested split panes
• 3 columns with left and right components fixed (nested)

N.B., not all markup in the examples are needed for setting up the split panes. <div class="split-pane-frame"> and <div class="decoration"> are used for styling purposes only. Feel free to use them, but you might want to style things your own way.