Question

I have a doosie of a layout problem that looks like a browser bug.

It manifests only in FF3 (haven’t tested ff2).

It only shows up on the first load of the page. If I resize the window it behaves properly.

It goes away when I put a border on the problem element, and comes back when I take the border off.

No other properties change.

Here is an image of the problem:

Firebug’s DOM inspector thinks that the footer spans the whole width in both cases. It seems like it’s only the text-align:center that’s not correctly respecting the full width.
*Update: taking off text-align:center does not solve it. The text runs flush up against the left side of the screen (correct) or the purple box (incorrect).

The 1px purple border you can see in the screen is #centerHolder, the child of a different element and should not affect the layout of the footer, though it clearly does.
*Update: Shrinking the height of the purple box to 85%, where it couldn’t possibly be in the way, doesn’t change the problem at all. The text still thinks the purple box is in the way.

Thanks for your comments and ideas.

HTML:

<div id="container">
    <div id="centerHolder"></div>
</div>
<p id="footer">
    Copyright ©2009 Lala Corporation
    <a class="link" onclick="ContactUs_OnClick(); return false;" href="#">Contact Us</a>
</p>

CSS:

#container{
position:relative;
height:96%;
min-height:600px;
width:100%;
min-width:975px;
max-width:1300px;
margin:0 auto;
z-index:2;
}
#centerHolder {
float:left;
margin-left:245px;
width:10%;
z-index:1000;
}
#footer {
border:1px solid green;
margin:0;
padding-top:5px;
position:relative;
text-align:center;
z-index:1;
}

Answer 1

You need clear: both; on your #footer, it’s not clearing your floated div #centerHolder