Need help positioning some Divs

Question

I had posted a similar question previously, when I was looking for help in doing the javascript portion.

I now have figured out how to get the javascript working to reproduce this affect in the images below, I need help getting my "MIDDLE" clickable div into place though.... scroll down to see the question portion

Ok here is a page with the code I have this far on jsfiddle.

Mu updated attempt, got it mostly working but it seems kind of hacky the way I had to do it

http://jsfiddle.net/jasondavis/HRq6G/5/embedded/result/

I have a container div with header, content, sidebar, footer areas. Right now when you click on the header div it will toggle the sidebar and content areas.

I would really like to figure out how I can get a middle DIV in between the article content and the sidebar, I will then make that div be the trigger to toggle it all.

In the image you can see that the new center div should always stay attached to the right side of the article div

If you are good with this kind of stuff I would greatly appreciate any help I can get with it, I have spent hours trying to get a div to position like I am describing with no luck. The div should also be the height of the article div

-----UPDATE-----

http://jsfiddle.net/jasondavis/HRq6G/6/embedded/result/

I have it working now. It can most likely be improved, I had to do some hacks like setting some negative margins, I would imagine someone with better knowledge could do it without that

Answer 1

Your explanation was a little hard to understand, but I think this is what you want. Basically there is a thin div between the sidebar and the main content area. Clicking on it causes the sidebar to relocate. Clicking it again restores the sidebar.

http://jsfiddle.net/HRq6G/4/

To accomplish this I chose to absolutely position the middle div along the right edge of the article div. I called the middle div 'trigger.'