Centering a div in Firefox using margin: auto;

The recommended approach doesn't seem to work

[johnreitano]

I can't seem to get this div to center in Firefox or Safari.

I'm trying to get the div with id "panel-wrapper" to center on <> , but I'm not having any luck. I did put in this CSS code on the containing div:

width:900px;
margin-left: auto;
margin-right: auto;
text-align: center;

but the contained div just aligns left on Firefox and Safari. Any ideas?

Thanks,
John

PS Here is the complete CSS code:

html, body {margin: 0; padding: 0; }
body {padding-bottom: 10px; }
img {border-style:none;}

#container {
border: 1px transparent;
width:950px; margin:10px;
font-family: arial, helvetica, sans-serif;
position:relative;

}

#content {
width:900px;
margin-left: auto;
margin-right: auto;
text-align: center;

/* set minimum height for pages with little content */
min-height:400px;
height:auto !important;
height:400px;

}

#panel-wrapper {
width: 823;
height: 388px;
}

.panel-content {
margin-top: 0;
margin-left:0;
padding-top: 15px;
width: 370px;
height: 140px;
background-color: transparent;
text-align: center;
color: black;
}

.panel-background {
float: left;
width: 370px;
height: 154px;
margin: 20px 20px 20px 20px;
padding: 0px;
background-image: url(../../images/roundedcorner.gif);
background-repeat: no-repeat;
}

.panel-content a {
font-family: arial;
font-size: 12px;
font-weight: bolder;
color: black;
width: 230px;
background-color: #FFD700;
padding: 5px;
text-decoration: none;
border-bottom: 2px solid #FFa500;
border-right: 2px solid #FFa500;
}

#content { border: 1px solid red;}
#panel-wrapper {border: 1px solid blue;}

[edited by: SuzyUK at 4:30 pm (utc) on Aug. 29, 2008]
[edit reason] Please No URI's, see guidelines at top of forum [/edit]

[swa66]

The auto margins need to be applied on the element itself, not the parent. Text-align is supposed to only work for inline content (unless you try to develop in IE, which you really shouldn't it works counterproductive)

[SuzyUK]

Welcome to WebmasterWorld, johnreitano

what swa66 says. And, though it might be a typo, you should always use units on widths and heights (unless they're zero), so #panel-wrapper has an error.

width: 823px;