Floated DIV overlaps other DIVs in IE

It's an IE bug, but I don't know which one or how to fix it

[Candy_Train]

Hi, I hope someone can help ... I've built a layout which includes a ul list formated into navigational tabs and floated right and a div containing text to sit below the tabs floated to the left and set to clear other floats ether side.

It displays beautifully in FF, Opera and other compliant brousers ... but in IE ... the content DIV seems to float carlessly right over my navigational tabs!... why, why, why oh why... I hate IE...

Here's the HTML:

<div id="nav">
<ul>
<li> <a href="#"><span>Contact</span></a> </li>
<li> <a href="#"><span>Links</span></a> </li>
<li> <a href="#"><span>Jobs</span></a> </li>
<li id="current"> <a href="#"><span>About</span></a></li>
</ul>
</div>

<--! This DIV floats over the above "nav" div in IE -->

<div class="main">
<h1> Main Heading </h1>
<span class="text-col-1"><p> Text about blah, blah, blah </p>
<p>Another paragraph of text</p></span>

<span class="text-col-2"><p>More text </p>
<p>And even more</p></span>
</div>

And the CSS:

/* ----- Start TABS -------- */
#nav {
float:right;
font-size:80%;
line-height:normal;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
margin: 0px;
padding: 0px;
background: url(../images/corner_rt.gif) no-repeat right top;
clear: both;
width: 100%;
}
#nav ul {
list-style:none;
padding: 10px 30px 0 0px;
}
#nav li {
display:inline;
margin:0;
padding:0;
float: right;
clear: left;
}
#nav a {
float:left;
background:url(../images/tableftB.gif) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#nav a span {
float:left;
display:block;
background:url(../images/tabrightB.gif) no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#nav a span {float:none;}
/* End IE5-Mac hack */
#nav a:hover span {
color:#000;
}
#nav a:hover {
background-position:0% -42px;
}
#nav a:hover span {
background-position:100% -42px;
}

#nav #current a {
background-position:0% -42px;
}
#nav #current a span {
background-position:100% -42px;
}
/* --- END TABS ------*/

.main {
background: #FFFFFF;
float: left;
padding: 10px;
clear: both;
width: 95%;
border: 1px solid #FFFFFF;
margin-bottom: 10px;
}
.text-col-1 {
float: left;
width: 45%;
background: #FFFFFF;
}
.text-col-2 {
float: right;
background: #FFFFFF;
width: 45%;
}

Apply a background colour and you can see the effect recreated when you open the doc in and IE version. Where am I going wrong? Can this be fixed? please let it be fixable....please.

Yours forever grateful,

Candy.

[Candy_Train]

Hi, have solved the problem this morning, it took me 3 minutes to do, but have learnt a valuable lesson. Don't try and fix bugs when you're tired and have been looking at the same code all day!

After making a simple model of the problem, I eliminated one by one properties which I thought could be causing the problem and observed the result after each one. It turned out to be two things, the float property on the .main div and the top maring on the #nav div.

Eliminating these two seemed to do the trick, although I still don't understand why it happened in the first place....? oh well, at least now I have a method for diggin out bugs.