The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Centering a page with multiple layers

I am working on a site design that has multiple layers (i.e. the menu overlaps part of the content's background). This means I have to use absolute positioning to get everything in place, but I then lose the ability to centre the design on the users screen.

Does anybody know of a way around this?

For example, is it possible to absolutely position something within a relatively positioned element (container)?

If you have absolutely positioned elements in your page already then they will need to be placed relative to the parent container. What this simply means is that the surrounding div should be position:relative. You do not need to supply any co-ordinates so it will not affect your page layout.

The usual way to centre is to use margin-left:auto and margin-right:auto on the div. However , you will also need to supply a width for the surrounding div otherwise it will not centre, so you will need to supply a width large enough to hold your content including borders and padding etc. You will also need the text-align:center hack for ie5.

I've put the hack for ie5 (text-align:center) in the body tag which saves a div. I've also set the central class to text-align:left to counteract the effects of the previous hack.

Be aware that mozilla will centre the page but will allow the left side of the page to disappear past the left edge of the window when the page is resized. (Ie stops at the left edge and just the right edge reduces etc. You can use a min-width in the body tag for mozilla to make it stop at the edge e.g. body{ min-width-775px}.