CODEWITHSUNDEEP
htmlcss
Elie
Elie

Reputation: 13865

Align a div using CSS

I have the following defined in my css file:

body  {
    text-align: center;
    float: right;
    position: fixed;
}
.twoColFixRtHdr #container {
    width: 780px;
    margin: 0 auto;
    border: 1px solid #000000;
    text-align: left;
}

and I have my HTML defined as follows:

<body class="twoColFixRtHdr">
  <div id="container">
    <div id="header">

The problem is, in IE (all versions I've been able to check) center the content of the page, but in Firefox, it's left-aligned. I know that text-align:center will center the content of the element, but not the element itself, so you have to nest your content, which is what the extra div is for. But I must be missing something about the differences between IE and Firefox in terms of how it renders this tag.

Any ideas? You can look at the site: http://www.solar-fit.ca

Upvotes: 0

Views: 260

Answers (5)

Andrew Mullins
Andrew Mullins

Reputation: 48

Remove the float and position properties from the body rule and add 100% width.

body { text-align: center; width: 100% }

Upvotes: 0

Moak
Moak

Reputation: 12885

these two cause the problem

body -> float: right; position: fixed;

remove those

Upvotes: 1

Justin Grant
Justin Grant

Reputation: 46763

Not sure about the cause, but a fix is putting IE into standards mode via a DOCTYPE, e.g. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
    body  {
        text-align: center;
        float: right;
        position: fixed;
    }
    .twoColFixRtHdr #container {
        width: 780px;
        margin: 0 auto;
        border: 1px solid #000000;
        text-align: left;
    }
</style>
</head>
<body class="twoColFixRtHdr">
  <div id="container">
    <div id="header">
    Some text goes here
    </div>
  </div>
</body>
</html>

Upvotes: 0

JohnFx
JohnFx

Reputation: 34917

You tried this yet? 

#container{
  width: 780px ;
  margin-left: auto ;
  margin-right: auto ;
}

You shouldn't need the nested div with this approach. According to the source ...

"The code above has been tested with IE 6, 7, Firefox, Opera and Safari."

Upvotes: 1

Joy Dutta
Joy Dutta

Reputation: 3426

How about putting margin: 0px auto; in body ?

Upvotes: 0

Related Questions