ansaurus

Question

Align a div using CSS

Answer 1

A:

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

Joy Dutta 2009-11-18 02:57:34

Sorry, that's also there. I trimmed the css. I'm adding more info to the question now.

Elie 2009-11-18 02:58:57

Answer 2

+1 A:

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."

JohnFx 2009-11-18 02:58:19

yeah, I just did. Didn't seem to make any difference.

Elie 2009-11-18 03:02:31

Answer 3

A:

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"&gt;

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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>

Justin Grant 2009-11-18 03:02:00

But in IE it displays correctly! Why would I want to change that?

Elie 2009-11-18 03:03:36

What is the desired result? Sorry I assumed that the firefox result was the one you wanted.

Justin Grant 2009-11-18 03:15:53

Answer 4

+1 A:

these two cause the problem

body -> float: right; position: fixed;

remove those

Moak 2009-11-18 03:03:29

Now it's right aligned instead of centered. Which I suppose helps, since it was left aligned before. Let me try changing float to center.

Elie 2009-11-18 03:05:56

There we go - deleted the wrong line. Thanks!

Elie 2009-11-18 03:07:10

Remove 'text-align: center' too .. as it's doing nothing to centre your container. The centring is being carried out by 'margin: 0 auto;'

codeinthehole 2009-11-18 03:14:20

@codinthehole: the text-align: center; is an IE fix

Moak 2009-11-19 05:05:37

Answer 5

A:

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

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

Andrew Mullins 2009-11-18 04:16:41

ansaurus

tags:

views:

answers:

Align a div using CSS

related questions