How to center align DIV in IE ?

Forum Moderators: not2easy

Message Too Old, No Replies

How to center align DIV in IE ?

jawaidgadiwala

9:24 am on Feb 23, 2010 (gmt 0)

i am facing some problem in IE that content area (i.e. wrap DIV)is not centered aligned in IE 6 but seems ok in firefox... Here is the code...


<html>
<head>
<style type="text/css">
body{
margin:0px 0px;
}
#header{
width:100%;
height:200px;
margin-left:auto;
margin-right:auto;
background-color:#ff00ff;
}
#wrap{
width:800px;
height:400px;
margin-left:auto;
margin-right:auto;
background-color:#0000ff;
}

#left{
float:left;
width:69.9%;
height:100%;
background-color:#ffff0f;
}
#right{
float:right;
width:30%;
background-color:#00ff00;
height:100%;
}

#footer{
width:100%;
height:100px;
margin-left:auto;
margin-right:auto;
background-color:#ff0000;
}
</style>
</head>
<body>

<div id="header">
</div>

<div id="wrap">
<div id="left">
Hello
</div>
<div id="right">
Hi
</div>
</div>

<div id="footer">
</div>

</body>
</html>

alt131

3:05 pm on Feb 23, 2010 (gmt 0)

Hi jawaidgadiwala,

Without a doctype ie6 renders in "quirks mode", which means div#wrap isn't being centred by

margin-left:auto;
margin-right:auto;

There are other ways to achieve the "centred" effect, but quirks mode creates other complications, so much easier to give the document a doctype that triggers standards compliant rendering.

The first post in What's Your Doctype [webmasterworld.com] gives examples and explains why in more detail.

jawaidgadiwala

11:49 am on Feb 25, 2010 (gmt 0)

ok. thanks

jawaidgadiwala

11:50 am on Feb 25, 2010 (gmt 0)

ok. thanks

joiseymike

8:42 pm on Feb 25, 2010 (gmt 0)

I'd add this to the top of your CSS file:


body { text-align: center; }
div,p,li { text-align: left; }