Ok, I've run across another problem that only shows up in IE6 and has me rather confused. On a site I'm working on I have a floating div on the right hand side and a footer at the bottom of the page. In order to keep the floating div from overlapping the footer when there is not enough text beside the floater, I've used another, hidden div with its clear property set, which forces some extra vertical space when necessary and pushes the footer down below the floater quite nicely.
The problem is that in IE6, if the div with the clear property set actually comes into play (because there was not enough content to push the footer naturally down below the floater), it pushes the border on the containing div drastically to the left!
I've created a very simple mock up that illustrates the problem. Take a look at this page to see how things are supposed to work, with the floating blue box on the right and the footer down below:
Now take a look at this page to see IE6's little problem. Here there was not enough content to push the footer down, so the clearing div comes into play and should push the footer down, which it does, but as you can see, it also moves the left border: http://www.computer-allies.com/CSSProblem/ClearBug.html
Can anyone tell me why IE6 is behaving so strangely, and if there's any way I can prevent it? Keep in mind I'm not really interested in other ways to lay things out, since this layout is necessary for the rest of the site's structure. These pages are just
very simply examples to illustrate the point.
Thanks in advance!