I've been working on a page for quite some time and I could never get my page dynamically centered (I'm using XHTML Strict), but then I found this ssite that was centered with CSS*. I noticed that it all seems to be centered with:
Code:
#holder {
    background: #fff;
    border: 1px solid #000;
    margin: 10px auto;
    width: 760px;
    /*position: absolute;*/
}
When I drop the comments from around the position statement the page fails to center. Now, the way my page is set-up (I can't post links since I was subcontracted at the last minute so while I did the best I could and it's decent... it's still not properly centered**) is that there is a lot of <div>s using position:absolute to line-up the images that are part of the decoration/content. Now all the tags are ultimately nested within a <div> that that encompasses all of the <body> and is id="page".

I've changed the style for page in the .css file to :
div#page{margin: 10px auto;}
and the page doesn't center!! I realize that "absolute" breaks "margin" but "page" is now a top-level tag and it is not absolute. My understanding of using "absolute" is that it applies moving the container with respect to it's container, so that moving the parent container would move the child by the additional of the parent. In fact, I have a triple-nested div that works that way on the page (without and margin setting though). Does anyone have any suggestions?

I get this problem with both Firefox 1.0 and IE 6.0 and both my xhtml and css are standard compliant.

*Disclaimer: I'm not advocating the site or supporting it's content, mearly using it as an example.
**Actually, out of frustration I just statically centered it on the screen assuming browsing at 1024x800 using the fullscreen