center a layout in IE + Firefox

[iSonny.]

Can anyone please tell me how to center a layout in IE and FF

Atm I use this:

body {
background-image: url(images/bg.gif);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: grey;
margin: 0;
}
* {margin: 0;}

#wrapper {
margin: auto;
width: 918;

In the style, and this in the body:

<div id="wrapper">
Layout Contents
</div>

If you need to see the layout ask me and ill PM you it!

Thanks to anyone that helps!

[Pazza]

Add:

margin-left:auto;
margin-right:auto;

[Blob]

<div align="center">
[content]
</div>

[iSonny.]

<div align="center">
[content]
</div>

That wont work because im using margins.

Add:

margin-left:auto;
margin-right:auto;

Where do I add this? In the body css?

[Jam-ez]

I believe so yes, just try it and see.

[iSonny.]

I believe so yes, just try it and see.

It didn't work

Thanks anyway!

[Jam-ez]

Check my next post, if that doesn't work use this:

Show Hide

body 
{
     background-image: url(images/bg.gif);
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 10px;
     color: grey;
     margin-left:auto;
     margin-right:auto;
}
#wrapper 
{
     margin: auto;
     width: 918;
}

I'm sure that should work - I'm no expert at CSS however, if not try this:

body 
{
     background-image: url(images/bg.gif);
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 10px;
     color: grey;
}
#wrapper 
{
     margin: auto;
     width: 918;
     margin-left:auto;
     margin-right:auto;
}

[Knuxxy]

body {
margin: auto;
}

[Jam-ez]

body {
margin: auto;
}

That's the one!

Ignore my previous code, try this instead then:

Show Hide

body {
background-image: url(images/bg.gif);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: grey;
margin: auto;
}
* {margin: 0;}

#wrapper {
margin: auto;
width: 918;
}

Or just try everything...

[Source]

body {
     background: #FFF;
     font-family: Arial, Helvetica, Times New Roman;
     color: #1d1d1d;
     /* other body properties here */
}

#container {
     width: 950px;
     margin: auto;
}

#somethingInsideContainer {
     width: 100%;
     height: 200px;
     background: #333;
     float: left;
}

<div id="container">
     <div id="somethingInsideContainer"></div>
</div>