Forum Moderators: not2easy
Below is the code to reproduce this. I'm sure this must be an existing bug/feature ;) but I haven't been able to find a work around. Thanks for any input.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset:utf-8">
<title>Firefox Bug</title>
<style type="text/css">
body
{
background: #E8ECF6;
margin: 0;
padding: 0;
text-align: center;
}#container
{
position: relative;
padding: 0;
margin: 0 auto;
width: 770px;
text-align: left;
/*border: 1px solid #000;*/ /*Uncomment rule to see correct positioning */
}#intro
{
position: absolute; /* Should be relative to container's position */
top: 0;
left: 0;
width: 195px;
margin: 0;
padding: 0;
border: 1px solid blue;
background-color: #fff;
}#content
{
position: relative;
margin: 0;
padding: 0;
}#status
{
margin: 15px 0 0 200px;
border: 1px solid red;
background-color: #fff;
}
</style></head>
<body>
<div id="container"><div id="intro">
intro
</div><div id="content">
<div id="status">
status
</div>
</div>
</div>
</body>
</html>
The trick is to apply a top border, then adjust the top margin negatively to hide that border outside the viewport.
So the style is modified like so:
#container
{
position: relative;
padding: 0;
margin: 0 auto;
width: 770px;
text-align: left;
border-top: 1px solid #000;
margin-top: -1px;
}
Any other solutions?
One fix is to switch from margin to padding, but that doesn't work here because of the border on #status. Another option is to apply a negative 15px top margin to #intro, but I don't like that anymore than the negative 1px hack you've used above.
There are a few other ways to turn off collapsing margins, including floating the element or positioning it absolutely, but in both cases you would have to define #status's width, so that's no good.
The best option I can see is to remove the 15px top margin from #status and replace it with a top:15px on #content. Since that element is set to position:relative anyway, it accomplishes the effect you want without dealing with messy margins.
cEM
Added: Another option is to remove the margin from #status and add it in as a top padding on #content, which has no borders or backgrounds to complicate things.
