I would like to center my website. I have two divs with absolute positioning and z-index order and then the rest of the content. The two divs are necessary to position 2 images over each other so one will mask part of the other. This stems from the desire to have an animated gif in my logo and have as many colors as needed to render a nice gradation behind it, then both have to hit a specific location relative to the rest of the site.
Here are the masks:
<div id="logomask" style="position:absolute; width:135; height:99; z-index:2; left: 20px; top: 1px; visibility: visible;"><img src="images/<?php echo $color; ?>/logomask.gif" width="135" height="99"></div>
<div id="logo" style="position:absolute; width:135; height:99; z-index:1; left: 20; top: 1; visibility: visible;"><img src="images/<?php echo $color; ?>/logo<?php if ($site_mode == "demo") echo "-demo"; ?>.gif" width="135" height="99"></div>
I tried creating an outer div like this:
</div> around everything. The page centered itself but the two divs did not move.
Here is the page:
Is there a way that I can accomplish the centering properly?