html/css centering problem

[Firenova]

my current website, http://www.radicalflame.com, will stay in the center of the browser nicely, but there is one problem.

here is the css code involved:

position: absolute;
width: 1000px;
margin-left: -500px;
left:50%;

however, if you resize the browser window to a size smaller than 1000 pixels, you will notice that the left side of the page gets chopped off so that you cannot scroll all the way left. That's not good.

http://www.wincustomize.com is an example of a site that behaves exactly how I want. The content is set within absolute boundaries, but the whole thing remains centered AND intact regardless of how you resize the browser.

 

[sourfacedcyclop]

I think its because you gave it a position:absolute; value. Have you tried using margin:0 auto;? That should center it to the middle of the page.

 

[diabolo]

yes that will fix that problem, but another problem will arise when you set it to margin: 0 auto

your text "Welcome Guest" and "Home" will become misaligned

 

[leafypiggy]

or just simply align:center

 

[diabolo]

or just simply align:center

"align: center" will only center child elements of that div, not the div itself