Question

Basically, I am looking for a way to center a container that is 1600px within a container that is 940px.

I want the page to stay centered at all times, and the main content of the site is 940px wide. I have an image that is 1600px, and just adding the image forces the image to align left with the 940px container and overflow to the right 660px. See the image below for an example.

What I want is the image to center within the 940px container, and save for adding multiple background images, which really isn’t pre IE8 friendly, I am at a loss.

I’ve never really had to do this before, so I’ve never run into this problem.

Right now, I have the page set to a master container of 1600px. This works, but when you open the page, the page starts at the far left of the 1600px container and the main content appears uncentered.

Example 2 below is what I am looking for.

Any help is greatly appreciated. Thanks guys and gals!

Answer 1

Or you could just center the 1600 container relative to the Page using the following attributes:

left: 50%;
margin-left: -800px;