Forum Moderators: not2easy
I would be most appreciative of what I'm missing in getting my main page container to centre using margin:auto. I've put together a test-case and included it below with the sort of CSS I am using.
The main container I want to centre is #content-mid-inner to be around 90% of the page width surrounded by the background from the outer element. Hope this makes sense.
Thanks in advance.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>another page by example.com</title>
<style type="text/css">
body {
margin:0;
padding:0;
font-size:12px;
}
#head {
float:left;
display:inline; /* To fix IE6 double-margin bug */
background:darkcyan;
width:100%;
margin:0;
clear:both;
}
#content-mid-outer {
float:left;
display:inline;
background:#ffeedd;
padding:10px;
width:100%;
margin:0 0 0 0;
clear:both;
}
#content-mid-inner {
width:100%;
float:left;
display:inline;
width:90%;
background:white;
border:1px solid red;
margin: auto;
clear:both;
}
</style>
</head>
<body>
<div id="head">
<h1 id="logo"> <!-- ordinarily used with image-replacement -->
<a href="/">
<span>header</span>
</a>
</h1>
</div><!-- end head -->
<div id="content-mid-outer">
<div id="content-mid-inner">
content mid inner. <br /> this should be floated left and centred because of ‘margin auto’
</div> <!-- content-mid-inner -->
</div> <!-- content mid outer end -->
</body>
</html>
here is your edited code...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css"><title>another page by example.com</title>
<style type="text/css">
body {
margin:0;
padding:0;
font-size:12px;
}
#head {
float:left;
/*display:inline; *//* To fix IE6 double-margin bug */
background:darkcyan;
width:100%;
/*margin:0;*/
/*clear:both;*/
}
#content-mid-outer {
/*float:left;*/
/*display:inline;*/
background:#ffeedd;
padding:10px;
/*width:100%;*/
/*margin:0 0 0 0;*/
clear:both;
}
#content-mid-inner {
width:100%;
/*float:left;*/
/*display:inline;*/
width:90%;
background:white;
border:1px solid red;
margin: auto;
/*clear:both;*/
}
</style></head>
<body><div id="head">
<h1 id="logo"> <!-- ordinarily used with image-replacement -->
<a href="/"><span>header</span></a>
</h1></div><!-- end head -->
<div id="content-mid-outer">
<div id="content-mid-inner">
content mid inner. <br>this should be floated left and centred because of ‘margin auto’
</div> <!-- content-mid-inner --></div> <!-- content mid outer end -->
</body>
</html>
