josh,
you can do one of two things. If you want to keep the absolute positioning you will want to change the styles for #body to this:
HTML:
#body {style.css (line 7)
background-color:#FFFFFF;
height:800px;
width:800px;
z-index:1;
position:absolute;
top:21px;
left:50%;
margin-left: -400px;
}
Explanation
Because you are using absolute positioning you want to set "left:50%". This will always set the left edge of your site to the center of the browser window (no matter the size).
But you want the center of you site to be in the center right? So that's when you add "margin-left: -400px". This subtracts 400 pixels (half of your sites width) from the left margin.
Just for your information...you could also center the site this way:
HTML:
#body {style.css (line 7)
background-color:#FFFFFF;
height:800px;
width:800px;
margin: 21px auto 0 auto;
}
Explanation
When the site is not using "position" the styles of "top, bottom, left, right" don't apply. You can just use margins instead. Above I wrote the "margin" style in short hand:
margin: top right bottom left >> margin: 21px auto 0 auto;
The "auto" setting will adjust the left and right margins equally, hence centering the div #body. You don't have to write "px" whenever you use a zero value.
