PDA

View Full Version : [CSS] centering DIV only works in FF


NeoDreamer
October 28th, 2007, 03:03 PM
I wrapped my whole site in this:


#wrapper {
border: 1px solid black;
width: 600px;
margin: auto;
background: #eff3f7;
}
It is supposed to center my site. Why does it only center in Firefox? It does not center in IE7 or IE6.

Page: http://joanna-levesque.org/main/bday.php
CSS: http://joanna-levesque.org/main/bday.css

http://img128.imageshack.us/img128/1092/31731282ef0.jpg
CriTiCeRz
October 28th, 2007, 03:39 PM
You might wanna go back to www.w3schools.com

Your missing the structure of the HTML page. Meaning your missing a lot of tags like the doctype, <html>, <head>, and <body>.
NeoDreamer
October 28th, 2007, 04:01 PM
I have added those. It now centers in IE, but it doesn't look that good anymore...
simplistik
October 28th, 2007, 04:12 PM
looks the same in ff and ie to me
Esherido
October 29th, 2007, 09:13 AM
Change the margin to:

margin: 0px auto;
That's what I do for centering and it works in both FF and IE for me.
psoxie
October 29th, 2007, 05:02 PM
what about centering in the div title like:

<div align="center" id="whatever">
content
</div>
ajcates
October 29th, 2007, 05:06 PM
psoxie, that is not standards complaint.
Pasquale
October 29th, 2007, 10:31 PM
Change the margin to:

margin: 0px auto;That's what I do for centering and it works in both FF and IE for me.
Yah, too many auto margins will screw things up nasty.
sidhu
October 30th, 2007, 08:34 AM
u r code is working in my system correctly
Esherido
October 31st, 2007, 02:23 PM
Yah, too many auto margins will screw things up nasty.
I try not to use auto's. They be evil.
Seb Hughes
October 31st, 2007, 04:02 PM
I usually uses something this this:

body
{
text-align: center;
}

div#container
{
margin-left: auto;
margin-right: auto;
width: 50em;
}
Esherido
October 31st, 2007, 06:11 PM
^ Just using up bytes by doing that.
aldomatic
October 31st, 2007, 06:13 PM
Try using a different Doc Type, could be.
tommythewolfboy
November 1st, 2007, 07:17 AM
This works fine in IE6-7 and Firefox. However, it doesn't in IE5 - you need to do this (http://www.simplebits.com/notebook/2004/09/08/centering.html)
tommythewolfboy
November 1st, 2007, 07:20 AM
ps. I would avoid margin: auto; - this sets ALL margins to be auto. For centering, you only want the left and right margins to be auto, hence the
margin: 0 auto; (top and bottom margins will be 0) - as per the article I link to above. Note - the method above will only work if you assign a width to the wrapper div.