CSS3 Only Split View

While browsing through the CSS3 UI documentation I came across the resize property. It turns out that with a couple of other properties in the CSS3 UI Module, you can build some fairly complex interfaces without any JavaScript. In this article I will walk through the CSS needed to build a split view that will degrade gracefully.

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 overflow: hidden.

Resizable Split View
Resizable Split View

Here is an example of a resizable element, go ahead and try it out:

Resize Me

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:

Panel A
Panel B

Take a look at the associated stylesheet if you are curious. Digital Web has a good article covering more details around using table displays.

Browser Support

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.

blog comments powered by Disqus
Monkey Small Crow Small