Centering a Page issue

Question

Ok, lets see if i can explain this. My page content has a width of 960px. It is centered in another div that has a width of 1426px (#siteWrap).

#siteWrap{
margin:0px auto;
width:1426px;
background: url(../images/bg.jpg) no-repeat ;
}

What i need to find out is how to get #siteWrap to center on a page regardless of screen resolutions. Most of my visitors are on a 1024x768 screen resolution. When i test this page on that resolution i am forced to scroll left to right to get to the site content.

Any help would be appreciated.

Answer 1

Just set

width: 100%;

and the margin: 0 auto; should be set on your content div, not on this one.

Answer 2

When a container overflows horizontally, the browsers natural reaction is to dock it to the left side of the screen. I think it should be doing this. To get around it, you can use Javascript to center your container element by calculating the necessary offsets based on screen/viewport resolution.

Answer 3

Try the following:

#sitewrap {
   position:absolute;
   top:0px;
   left:50%;
   width:1426px;
   margin-left:-713px;
   background: url(../images/bg.jpg) no-repeat ;
}

This will be centered but will overflow the browser window.