Forum Moderators: open
First point I am still very new at this so bear with me. I cannot get the box div shown below to center in IE5.5\Win. I think I have coded it correctly with text-align center for body and text-align left for wrap.
All is ok in IE 6, Netscape, Opera, FF. What am I doing wrong?
Here is a code sample:
<!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>
<title>My Title here</title>
<style type="text/css">
body {
margin:0;
padding:0;
text-align:center;
}
p { margin:0; }
#wrap {
width:760px;
\width:780px;
w\idth:760px;
border:2px solid black;
margin-left:auto;
margin-right:auto;
text-align:left;
}
#masthead {
padding:10px;
margin-bottom:0;
background-color:#fff2c8;
border-bottom:2px solid black;
}
#masthead h1 {
font:normal 1.7em Georgia,Times,"Times New Roman",serif;
margin:0;
}
#masthead h2 {
font:normal 1.5em Georgia,Times,"Times New Roman",serif;
margin:0;
}
#content {
padding:10px;
margin-left:220px;
background-color:#c9c7b6;
border-left:2px solid black;
}
#sidebar {
float:left;
width:200px;
\width:220px;
w\idth:200px;
margin:0;
margin-right:0;
padding:10px;
background-color:#fff;
}
#footer {
clear:both;
padding:10px;
margin-top:0;
background-color:#fff2c8;
border-top:2px solid black;
}
#box { /* This Box wont center in IE5.5 */
width:100px;
margin:40px auto;
margin-left:auto;
margin-right:auto;
border:1px solid black;
}
</style>
</head>
<body>
<div id="wrap">
<div id="masthead">
<h1>My Title</h1>
<h2>Secondry Title</h2>
</div>
<div id="sidebar">
sidebar content goes here.
</div>
<div id="content">
<div id="box">
text box text box text box text box text box
</div>
<p>more content here more content here.</p>
</div>
<div id="footer">
<p>Footer content here</p>
</div>
</div>
</body>
</html>
Thanks for your time.
Regards
Hugh
body {
margin:0 auto;
padding:0;
text-align:center;
}
I am sure I can fix it just need to look at it again.
Thanks for your reply.
