Centering a container DIV

Forum Moderators: not2easy

Message Too Old, No Replies

Centering a container DIV

Body: centered, Div, not?

Dabrowski

10:55 pm on Apr 16, 2007 (gmt 0)

Another fine example of my lack of ability when it comes to CSS layouts. I am trying to create a wrapper to center my entire page, I have:

BODY { text-align: center; }
DIV#pagewrapper {
text-align: left; /* To revert to normal text alignment within DIV
width: 500px; /* Smaller than clientwidth
border: 1px solid black; /* So I can see where it is */
}
<body>
<div id='pagewrapper'>
Some text
</div>
</body>

In IE 6 & 7 fine, the DIV is centered and the text is left. In FF The DIV stays left.

Fotiman

11:01 pm on Apr 16, 2007 (gmt 0)

You need to add margin: 0 auto; to your container (which is technically the correct way to do it, but IE doesn't understand that which is why you also need the text-align: center; on the body).

BODY { text-align: center; }
DIV#pagewrapper {
text-align: left;
margin: 0 auto;
width: 500px;
border: 1px solid black;
}

Dabrowski

11:21 pm on Apr 16, 2007 (gmt 0)

I hate the way there are loads of sites telling you what each parameter does, but no good sites telling you how to put them into practise!

Thanks mate, sorted.

Robin_reala

6:36 am on Apr 17, 2007 (gmt 0)

text-align:center should only be needed for IE5. If IE6 and 7 are also doing it then you�re running in quirks mode which is going to cause you a whole load of grief down the line. Make sure you�re using a correct DOCTYPE?

asmanand

8:24 am on Apr 17, 2007 (gmt 0)

there are two solutions to solve this issue in all the browsers.

1. <body><center><div id='pagewrapper'>
Some text
</div></center></body>

2. <body>
<div id="wrapper">
<div id='pagewrapper'>
Some text
</div></div>
</body>

in the second one you need set text-align:center in the CSS for the id wrapper

Robin_reala

8:56 am on Apr 17, 2007 (gmt 0)

Eesh. <center> is deprecated and has been for 8 years now. Regarding your second option, there's no need to add in an extra wrapper element to put a text align on. Basically there're two options; all you have to do is decide whether you like IE5 or not:

I don't care about IE5

#pagewrapper { margin: 0 auto; }

I'm feeling generous

body { text-align: center; }
#pagewrapper { text-align: left; margin: 0 auto; }

asmanand

9:02 am on Apr 17, 2007 (gmt 0)

nice one thankyou

Dabrowski

10:47 am on Apr 17, 2007 (gmt 0)

Man even I knew about <center>!

You're right Robin, I did "0 auto" in IE too and it's fine. I don't care about IE5 either.

One thing though, your second solution of using 2 divs is what I had originally, still didn't work with FF.

Dabrowski

10:57 am on Apr 17, 2007 (gmt 0)

Sorry Robin, it was asmanand's solution I was referring to. Looks like you were wrong on both counts there asmanand.