Split pane using CSS3 Resize property

Question

I've been trying to do split pane resizing using the CSS3 property.

Here is the code:

<style>

div.left, div.right {float: left; outline: solid 1px #ccc; 
resize: both; overflow: auto;}

div.left {width: 20%}

div.right {width: 80%}

</style> 

<div class="left"> 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div> 

<div class="right"> 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
</div> 

The problem is if i resize the left div, the right div won't shrink and its being pushed to the bottom. Are there any other ways that I can make the split pane without using the javascript?

Say, if it can't be done using CSS3 and really need to use the javascript, the javascript should be minimal if can.

Thank you.

Answer 1

I'm not sure why you're expecting the other element to resize - there doesn't appear to be any relationship between them in your markup?

Assuming you're targeting WebKit and Firefox development snapshots, this should do most of what you're interested in:

1. Create a wrapper element and set it to display: box (using appropriate vendor prefixes)
2. Set one of your elements to be fixed size but resizable, otherwise things just get too confusing for the browser
3. Set the other to be box-flex: 1 (again with appropriate vendor prefixes)

Here's a working example, works better in Chrome than Firefox - if you need any other browsers supported then you'll need a JavaScript solution.

--edit:

Just got an upvote on this old answer, the old example doesn't work with the new version of flexbox, so here's a new example. In the above steps replace display: box with display: flex and box-flex: 1 with flex: 1 1 0;.