Toggling a side menu over the top of a centred web page

I have a centred web page (using margin: 0 auto; on a 'wrapper DIV') that has a long side-menu. One page template needs a wide content area, so I am attempting to add a link at the top that will toggle showing the side menu (using jquery), so if clicked it will appear over the top of the main page content.

I can achieve this if I use 'position: absolute;' on the #sidemenucontainer DIV but if I use relative positioning (so it's in the correct place relative to the centred layout ie: not stuck in the top left corner of the browser), then it pushes the main page content down to un开发者_开发问答derneath the menu, rather than appearing 'above' the page.

I can prepare some sample code if required, but I was hoping the above made sense. I'm sure I'm missing something obvious. Thanks!

Absolute means absolute in relation to the nearest relatively positioned parent div.

By giving your wrapper a position of relative and your side menu a position of absolute you'll be positioning the side menu within the wrapper.

You'll need the side menu positioned absolutely so that you can move it over the top of other items, in this case, the main content.

Here's a sample: http://jsfiddle.net/RLcFf/