2 replies [Last post]
Last seen: 19 years 25 weeks ago
Joined: 2003-08-12
Posts: 1
Points: 0

Pretty simple question. I want to center this layout:


The straight-up center tag only works in ie and mozilla... not opera. I also tried putting the whole layout into a width="100%" table, but that didn't work either. I was thinking there should be a way to do this in css...

Any suggestions?


Tony's picture
Last seen: 4 days 21 hours ago
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965


Hi Scr1pt_k1ddY,
Have a look at this topic in Common Questions. [url]http://www.csscreator.com/css-node/308

Hope that helps

Hampshire UK
Last seen: 11 years 35 weeks ago
Hampshire UK
Timezone: GMT+1
Joined: 2003-08-16
Posts: 60
Points: 5

Centered Layout


To centre an existing layout you can wrap the whole layout in a div and use margin-right:auto and margin-left:auto. You will need to know the width of your layout and also supply this with your css otherwise it won't work properly. (You will also need the text-align:center hack that ie5 gets wrong and uses to centre the inner div instead of the text. The downside of this hack is that you will have to set text-align left on an inner element to compensate.)

If you have absolutely positioned elements in your page (I haven't checked if you have) which will be placed relative to the parent container then you will need to also add position relative to the surrounding div. Absolutely positioned elements are placed in relation to their parent container. The parent container is the nearest ancestor that has a property for position other than static Otherwise the parent container is the html element (i.e.the body outside of margins).

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.

A simple example would be:

body {
text-align: center; /*ie5 hack*/
margin: 0px;
padding: 0px;
.central {
margin-right: auto;
margin-left: auto;
position: relative;
width: 800px;    /*substitue your page width*/
text-align: left; /*reset divs after ie5 hack*/



And then after the body tag :

<div class="central"> 

all the rest of your page.....


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.

I hope that this all makes sense and hasn't confused you.

Be aware that mozilla will centre the page differently from IE. In mozilla the left hand side of the page will disappear left as the window is resized smaller. In Ie the left edge of the page stays fixed to the left hand side when it reaches it.

I hope that this all makes sense and hasn't confused you.