Forum Moderators: not2easy
This contains about a half-dozen layers, including header, main content area, and nav bar. I need to center the whole thing vertically and horizontally, without changing the distances between individual layers (e.g.: main content area is 68px below header; nav bar starts 450px below header).
If I place the layers with absolute positioning, the absolute point of reference for each layer is simply the top left of the porthole. If I place them with relative positioning, they the layers display in normal flow, sequentially.
One possible solution with Javascript, computing x and y offsets based on browser window size, and then dynamically adding the offsets to each layer's "top" and "left" attributes. That works, kinda sorta, but it's messy--querying style attributes is not as simple as it sounds. Plus I have to support Mac browsers, which is always good for a Javascript headache.
Basically, I need to group together a set of layers and move that set, wholesale, to a horiz-vert-centered position while not shifting them in relation to each other. And do it cleanly, if possible.
Any suggestions?
Change the main layer (that contains all the layers) to...
position: relative;
margin: auto; /*this will center it, but may not make it go in the middle (cos some browsers r stupid, like IE!) */
top:10%; /*or whatever you want it to be as a kind of safe-proof if the margin doesnt work! */
if your using Div tags this is how i solved it.
<style type="text/css">
#centerLayer {
margin: 0 auto; /* this will work for most browsers however it WILL NOT WORK FOR IE 6.0 */ }
body { text-align: center; /* as messed up as it looks, this will fix your centering problem in IE 6.0 */ }
#contentLayer { text-align: left; /* adjust text back to normal alignment */ }
</style>
<body>
<div class="centerLayer">
<div class="contentLayer">....</div>
</div>
</body>
If I haven't explained it good enough for you, go to
[quirksmode.org ] for more information about this.
I wound up creating a table (I know, weak) in order to center the main container div. That's the most fool-proof method, especially when you have to start worry about Mac browsers.
What I didn't know when I asked the question is that absolute positioning references the container layer and not the browser porthole for co-ordinates (0,0).
Thanks again --
I was having that problem in IE (firefox was working fine without the DTD).
Added the DTD and now it center aligns in IE as well. Muchos gracias. :)
