[CSS] Margin: auto; not working in any browser (including FF).

Neo824 · 02-08-2008

Hello once again! I am having a bit of CSS troubles...'margin:0px auto;' is not working. I would like to use it to center everything on my page. Note: It does not work in ANY browser. Note my code below:

index.html

Code:

<html>

<!-- OPEN HEAD TAG -->
<head>
<title>Neo Productions [HomePage]</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<!-- CLOSE HEAD TAG -->

<!-- OPEN BODY TAG -->
<body id="background">
	<div id="content">
    	<div id="header">
        </div>
    </div>
</body>
<!-- CLOSE BODY TAG -->
</html>

stylesheet.css

Code:

/* Neo Productions [StyleSheet] */

/* Basic Styles */
body {
font-family: Tahoma, Arial;
font-size: 10px;
height: 100%;
padding: 0;
/* IE Centering */
text-align: center;
}

a{
text-decoration: none;
color: #000;
}

/* Background */
#background {
background: #383838;
position: fixed;
top: 0;
left: 0;
height: 100%
width: 100%;
}

/* Content */
div#content {
width: 777px;
/* Default Centering [Most Browsers] */
margin: 0px auto;
/* Reset Text-Align */
text-align: left;

}

/* Header */
div#header {
background: url('images/headerBG.png');
width: 777px;
height: 210px;
}

Result of the above code:
Neo Productions [HomePage]

Can anyone help? Any suggestions will be highly appreciated!

- Neo

agentxi · 02-08-2008

I think it has something to do with your position properties on the #background.

Personally I would take out everything from #background with the exception of the color background: #383838;
and I would also change the text-align: left; to text-align: center; so that the content div will center in ie6 as well.

then in the #header div i would apply text-align: left; to reset your text. and any other divs' that are children of the content div.

for naming conventions, I usually name the outside div that wraps around the site with the id of wrapper (#wrapper) then content can be used for the content section of the site. but that's just how i work, everybody has a system they are happy with.

Neo824 · 02-08-2008

Quote:

Originally Posted by agentxi

I think it has something to do with your position properties on the #background.

Personally I would take out everything from #background with the exception of the color background: #383838;
and I would also change the text-align: left; to text-align: center; so that the content div will center in ie6 as well.

then in the #header div i would apply text-align: left; to reset your text. and any other divs' that are children of the content div.

for naming conventions, I usually name the outside div that wraps around the site with the id of wrapper (#wrapper) then content can be used for the content section of the site. but that's just how i work, everybody has a system they are happy with.

Thank you for the quick and efficient response! I also appreciate your naming suggestions :]! I have a question though...say I changed the name of 'content' to 'wrapper' and make a new div for the content called 'content'. Would I have 'text-align: center;' in 'content' or 'wrapper'?

- Neo

Telos · 02-08-2008

I noticed you didn't have any doctype in your document. I sometimes had problems with margin auto when I forgot to put a doctype or used the wrong one.

A List Apart: Articles: Fix Your Site With the Right DOCTYPE!

agentxi · 02-08-2008

Quote:

Thank you for the quick and efficient response! I also appreciate your naming suggestions :]! I have a question though...say I changed the name of 'content' to 'wrapper' and make a new div for the content called 'content'. Would I have 'text-align: center;' in 'content' or 'wrapper'?

you would have text-align: center in the wrapper
when you use margin: 0 auto; this centers it in all browsers except ie6

using text-align: center; centers it in ie6.