在FF和IE9中工作的CSS中心列？

Question

I am totally a beginner at CSS layouts, but I am trying to just start a basic one that is simply a 'fixed width' center column (just one div), so that the sides are flexible. I know this is not responsive/reactive, but I am just starting.

So I have tried googling tons of examples, but I can't find a starting point that works on both FF and IE9? I mean just getting started and they are different??

Here is latest example of simple style I tried:

* { padding: 0; margin: 0; }

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
 background: #f5f5f5;
}
#wrapper { 
 margin: 0 auto;
 width: 922px;
}
#content { 
 width: 900px;
 color: #333;
 border: 0px solid #f5f5f5;
 background: white;
 margin: 0px 0px 0px 0px;
 padding: 10px;
 height: 600px;
}

so this is the very beginning but already FF shows this aligned to the center and IE doesn't. So already everything I try (ie left:50% and margin-right:-461px, as an example I found) affects these differently. I read all over the place this is a very common challege, but I fear there is some foundation logic here that I am unaware of?

any help with this is greatly appreciated!

EDIT: Thanks for the comment! I do have the following, which again works in IE (and in chrome) but not FF?

css:

* { padding: 0; margin: 0; }

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
 background: #f5f5f5;
}
#wrapper { 
 margin: 0 auto;
 width: 922px;
 margin-left:auto;
 margin-right:auto;

}
#content { 
 width: 900px;
 color: #333;
 border: 2px solid #f5f5f5;
 background: white;
 padding: 10px;
 height: 600px;
 position:absolute;
 left:50%;
 margin-left:-461px;
}

#welcomeBanner{
    text-align:center;
    font-family:"segoe ui light","segoe ui","segoe";
    font-size:18pt;
    padding-top:20px;
    padding-bottom:20px;
    margin-top:0px;
}

html: is literally only:

    <div id="wrapper">
        <div id="content">
            <div id="welcomeBanner">Attempting to Learn This Stuff<div>
        </div>
    </div>

so in IE9 and Chrome I get the title in the center, big box center fixed with back ground color, etc. In FF nothing. I like there is not style applied to the page at all? I am using a link tag in the head, but it is obviously there and working for the others?

Answer 1

body {
    width:100%
}

div {
    width: 900px;
    margin:0 auto;
}

should work

cf Centering a Div in IE9 Using margin:auto