CSS3 Only Split View
The Resize Property
Apple introduced resizable textareas in Safari, which let users grab the corner of a textarea and resize it so that they could see what they were typing. There are a number of articles explaining how to disable this behavior.
Less obvious is that the
resize property can be applied to other elements, though it will only be visible if the element has an
overflow property as well. If you want to have scrollable content in the resizable element, use
overflow: auto, otherwise try
Here is an example of a resizable element, go ahead and try it out:
Uncommon Display Properties
We want to split the width of one element between two panes, if we grow one pane, the other should shrink. This happens to perfectly describe how tables are laid out in HTML. Luckily, even though our split view is not a table, we can tell the browser to display it with a table's rules.
The parent element will have
display: table, while the two panels inside will have
display: table-cell. With this in place, we can now lay out our split view's panels, and make them resizable:
Now that you have seen this, where can you use it? I have found that recent versions of FireFox and Webkit support the
resize property. Surprisingly, all modern browsers (IE8+) support
display: table. Unfortunately, only Webkit browsers seem to support the combination of these properties. On the bright side it does seem to degrade nicely. If you absolutely need all browsers to behave the same you can always use jQueryUI's resizable.