How can I center a container when the screen space is taken over by other element?

Question

I have a vertical sidebar navigation menu aligned to the left that has a width of 211px and height of 300px. I then have a container that is 960px wide. Since 211px of the screen width is being taken by the sidebar the container is overlapping with it when i center it using margin: 0 auto;

How can I center the container from the navigation menu rather than the general screen width with a solution where it will appear centered from the navigation menu across all browsers/platforms?

Answer 1

wrap the container with another div(ex. .wrapper).make the width of wrapper total view port width minus side bar width and then use margin:0 auto in container

EXAPLE:: FIDDLE