centering a page that is wider than the screen...help...

[fraserjohnstone]

Hey,

Im having a bit of an issue with a website im building for a band.

The band want a site that is 2500 width so that when the page loads you can either scroll roght or left to view the out of screen material...

i cant find a way of the page loading centered...it is always loading to the far left and all i can do is scroll right...i have uploaded the site to http://www.testingserver.comuv.com

the CSS looks as follows:


#header { float: right;
height: 275px;
width: 800px;
background-image: url(Images/header.png);
background-repeat: no-repeat;
}
#vocals {
background-image: url(Images/vocals%20BG.png);
height: auto;
width: 2500px;
overflow: auto;
left: 0%;
}
#maincontentindex { height: auto;
width: 100%;
background-image: url(Images/main%20bg.png);
background-repeat: repeat-y;
}
#navbarbg { background-repeat: no-repeat;
}
body {
background-image: url(Images/large%20bg.png);
background-repeat: repeat;
}
#container {
}
.style1 { color: #CCCCCC;
font-size: 16px;
font-weight: bold;
}
.style2 {color: #FFFFFF}
.style4 { color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#biography { height: auto;
width: 390px;
text-align: justify;
color: #FCFBFD;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #999;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
#wrapper {
padding: 5px;
height: auto;
width: 800px;
background-image: url(Images/Wrapper%20BG%201px.png);
background-repeat: repeat;
margin-right: auto;
margin-left: auto;
}
#cd { padding: 5px;
height: auto;
width: 390px;
}
#cddescription { padding: 5px;
height: 140px;
width: 225px;
float: right;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
}
#copyright { font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-top-color: #999999;
border-right-color: #999999;
border-bottom-color: #999999;
border-left-color: #999999;
}
#track {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-bottom-style: solid;
border-top-color: #999999;
border-right-color: #999999;
border-bottom-color: #999999;
border-left-color: #999999;
}
#galleryhome { padding: 5px;
height: 259px;
width: 390px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999999;
}
#gigs { padding: 5px;
height: auto;
width: 790px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #999999;
}
.style5 {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
-->
</style>
</head>



Any help with this would be really appreciated as i cant find any other threads on this specific issue.

thanks very much.

[cfajohnson]

Since you don't know how wide your viewers' windows will be, that will probably require JavaScript. Ask in a JS forum.