Centering an oversized Div element using jQuery

Question

I've got Div element which is 1680px wide, like this:

|                   |

Say, the actual screen/browser canvas resolution is 800px wide:

+      +

Now, how do I center the Div (and hide the rest) using jQuery so that the rest of the 1680px goes hidden, like this:

|     +      +      |
 ^^^^^        ^^^^^^

^ = clipped from the Div.

In other words, I want the Div the be shown within those two + range and hide the rest. If the actual screen resolution is bigger that 1680px, the the Div should be centered normally without any clipping.

I'm not sure if I was able to explain this dilemma perfectly, so ask away if something is unclear. This has been driven me mad already...

Answer 1

Use CSS only:

http://jsfiddle.net/rQfvs/

The key part being:

#bigdiv {
    position: relative;
    width: 1680px;
    margin-left: -840px;
    left: 50%;
}

Note that you do not necessarily need the container div, either. You can simply put the bigdiv in the main body. I would set the body's overflow to hidden as well in this case:

http://jsfiddle.net/rQfvs/3/