Why doesn't this html/css work in ie?

Question

I am just trying to center a div on the page. It works in chrome but in i.e. the div is still on the left:

<html>
<head></head>
<body>
  <div id="container" style="margin:0 auto; width:200px;">
       test
  </div>
</body>
</html>

Everything I've read has said that to center a block element, simply add margin:0 auto and specify a width, so I don't know why this isn't working.

I am testing on IE 7.0.5730

ajm · Accepted Answer · 2010-06-08 15:17:03Z

7

Your HTML snippet does not have a DOCTYPE, so IE is defaulting to quirksmode.

Using the HTML5 doctype:

<!DOCTYPE HTML>
<html>
<head></head>
<body>
  <div id="container" style="margin:0 auto; width:200px;">
       test
  </div>
</body>
</html>

answered Jun 8, 2010 at 15:17

ajm

20.2k3 gold badges34 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user361976 · Accepted Answer · 2010-06-09 02:18:10Z

1

another method would be to do this in your css, this way it works no matter if ie is in quirksmode or not:

body{text-align:center;}
#container{text-align: left;}

answered Jun 9, 2010 at 2:18

user361976