I solved this by moving my position:relative; declaration off of my #content div and on my lower nested #primary div.
No exactly sure why this has to bee, I assume it has something to do with IE and that wretched hasLayout stuff and the way it treats floats or something.
If anyone has any insight, I'd love some explanation for why this works now.
One should use position: relative only when necessary because this opens the door to so many IE bugs. This is still true as of version 7 although the situation has got better.
The problem was the following sequence of nested divs. From outer to inner:
div without layout having position: relative
div that hasLayout having position: static
div with position: relative with or without hasLayout
You may try the following example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>IE6 - div with position: relative inside div with layout inside div with position relative </title>
<style type="text/css">
body {
font-family: Arial, sans-serif;
}
#wrap {
position: relative;
background: green;
/* zoom: 1; */
}
#one {
width: 50%;
background: blue;
margin-left: 50px;
}
#two {
position: relative;
background: orange;
width: 50%;
}
</style>
</head>
<body>
IE6 is weird<br>IE6 is weird<br>IE6 is weird<br>IE6 is weird<br>IE6 is weird<br>IE6 is weird<br>IE6 is weird<br>IE6 is weird<br>
<div id="wrap">What is going on?<br>What is going on?<br>What is going on?<br>What is going on?<br>What is going on?<br>What is going on?<br>What is going on?<br>What is going on?<br>What is going on?<br>What is going on?<br>
<div id="one">
<div id="two">
<ul>
<li>1) Green div is relatively positioned and does not have layout</li>
<li>2) Blue div has layout while having position: static</li>
<li>3) Orange div is relatively positioned (not important whether it has layout or not)</li>
</ul>
Initially, when page loads in IE6 the yellow div is positioned outside the blue box and has drifted upwards to the top of the green box.<br>
When page is resized, the yellow box falls in place, but there may be flickering where the orange div disappears/reappears
</div>
</div>
</div>
</div>
</body>
</html>
I haven't yet found a source detailing the problem. If someone finds such a source I would like to know.