Thanks for the input, Arkinder. I've been using
display:inline
with floats for years as a
hasLayout
concession for IE6. But I guess since IE6 is now for all intents and purposes defunct, I can probably stop doing that.
The larger question for me is why Firefox is the only browser that "compensates" for the
margin:100px auto;
as you describe it. But I guess I should put that question to Mozilla, not here. In any case, thanks again.
Incidentally, for anyone reading this post in the future, I'm removing the two pages linked above from my server. But for reference I'll post the HTML from one of the pages below. All you have to do is remove
padding:1px;
from
.topbox
and view the page in Firefox 3.5+ to replicate the problem. If you're interested.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Untitled</title>
<meta name="generator" content="BBEdit 9.6">
<style>
#wrapper { position:relative; width:980px; margin:0 auto; }
.topbox { position:relative; zoom:1; margin-top:0; padding:1px; background-color:#ffc; }
.floatleftbox { float:left; width:200px; background-color:green; color:white; }
.clearboth { clear:both; zoom:1; line-height:1%; font-size:1%; }
.bottombox { width:400px; margin:100px auto; padding:15px; background-color:red; color:white; }
</style>
</head>
<body>
<div id="wrapper">
<div class="topbox">
<div class="floatleftbox">Testing</div>
<div class="clearboth"></div>
</div>
<div class="bottombox">Testing</div>
</div>
</body>
</html>
