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:


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! :P

Ignore my previous code, try this instead then:


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>

[Mentor]

o.0

With your orignal code, just switch wrappers css to..


#wrapper {
margin-left: auto;
margin-right: auto;
width: 918px;
}


You all missed the error, the margins were set fine, its the width that was the problem. If the width has no unit specifed it'll generally just get ignored. By adding px to it, everything should work as expected.

[Mentor]

o.0

With your orignal code, just switch wrappers css to..


#wrapper {
margin-left: auto;
margin-right: auto;
width: 918px;
}


You all missed the error, the margins were set fine, its the width that was the problem. If the width has no unit specifed it'll generally just get ignored. By adding px to it, everything should work as expected.

[Source]

You all missed the error, the margins were set fine, its the width that was the problem. If the width has no unit specifed it'll generally just get ignored. By adding px to it, everything should work as expected.

I guess you didn't read mine... the unit is clearly stated although its not to his specific measurement as I thought he would have the intelligence to change it where necessary.

[Mentor]

I guess you didn't read mine... the unit is clearly stated although its not to his specific measurement as I thought he would have the intelligence to change it where necessary.
Yea, but for unexplained reasons you added a pointless extra div within the container. Additionally you made it more than pointless by floating the inner div, which would cause any content added inside to not extend the container as would likely be wanted "/ Hence the need for a hight that only goes to make the layout even less flexible "/

[Source]

The extra div was to show some example content. All my layouts seem to expand fine, its my coding style to use more floats as it naturally works better in older browsers, without much fixing.

Its an argument that's not worth having on a habbo forum.

[Mentor]

The extra div was to show some example content. All my layouts seem to expand fine, its my coding style to use more floats as it naturally works better in older browsers, without much fixing.

Its an argument that's not worth having on a habbo forum.

o.0 urmm what?
Nether provides any advantage to rendering in any modern browser what so ever "/ Go back to when it would and the main issue to cope with would be the browser version pre-dating css altogether.

[Source]

Its not a matter I'm argueing, I am just saying that in my past experience the way I currently do things requires less fixing in IE 5.5 and 6 etc...

I havn't denied anything of what you have said, neither way is wrong. I don't get why you have suddenly developed a defensive stance against me?