jQuery Forum

Hoping someone can help me figure out how to do this. I have two div's which are set at 39% width and 59% width, with a small div between them set at 2% width. Below is a picture of what I have, the column 1 and column 2 are my two larger div's and the red one in the middle is the one set at 2%.

What I want to do, is have the user able to drag the red div in the picture above, and have it resize the two Column div's as it's moved. Move it to the right and Column 1 will get bigger, Column 2 will get smaller. 

I'm wondering if I might be able to use jQuery UI's Draggable to do it, and then just as it's dragged determine the amount and alter the width's of the two column div's respectively. Or if there's a way to use Resize to do it, or perhaps a combination of both. 

Ideally I would also like to limit them to a minimum of 10% width, so a max of 88%. 

Any help you could provide I would appreciate. Thank you.

But I couldn't see anything in the API in order to actually instruct it to align to the right.

I initialize the menu in my script like so:

This is the HTML for my menu:

This is a screenshot of the problem. Obviously you can see that the Playback portion isn't working as a normal submenu:

Any help you can provide I'd greatly appreciate.