How to create vertical drag-to-resize divider?

Question

Example of the divider

The center divider can be dragged to resize the left and right divs. It appears that dragging the divider will change the CSS width value as a percentage, but I don't know what's causing that value to change.

I'd like to create something similar to this, where a divider can be dragged to resize the left and right divs, and any content inside those divs will be fitted. How can this be done?

Potential compatibility issue to avoid: Eventually, I'd also like to make it responsive on mobile screens using @media to hide the right div while the left is visible, and hide the left div when the right is visible.

Answer 1

Using JQuery UI is probably the esiest way to achieve this. Here is a example of how you could start with that: A full page layout with resizable panes using jQuery UI

Also, look int the CSS resize property: http://www.w3schools.com/cssref/css3_pr_resize.asp

I don't think it's exactly what you want but you could combine it with some css to achieve a similar effect without JavaScript.