[Solved] probably simple IE6 3 pixels gap problem i can't solve

Hello, this is my first post in this forum, i need help about the 3 pixels gap problem in IE6 with floating elements.
I've searched in the forum and i've found a lot a threads, but i didn't manage to make it work.
I've read also the positioniseverything.net pages about the problem, nothing i did about this made it work either.
At the end i let the first fix i've read, which doesnt help a lot since the height is already set in my CSS for the floating divs...
Here is my code, thanks for the help !

CSS:

* {
margin: 0pt;
padding: 0pt;
}

/* Hides from IE5-mac \*/
* html div {
height: 1%;
}
/* End hide from IE5-mac */

body {
font-family: sans-serif;
font-size: 1.5em;
color: #FFF;
margin: 0pt;
padding: 0pt;
}

#container {
background: gray;
width: 800px;
margin-left: auto;
margin-right: auto;
}

#header {
width: 800px;
height: 50px;
background: blue;
opacity: 0.2;
}

#nav {
width: 800px;
height: 20px;
background: purple;
opacity: 0.3;
}

#left {
float: left;
width: 20px;
height: 100px;
background-color: lime;
opacity: 0.5;
}

#right {
float: right;
width: 20px;
height: 100px;
background-color: lime;
opacity: 0.5;
}

#content {
margin-left: 20px;
margin-right: 20px;
width: 760px;
height: 400px;
background-color: aqua;
opacity: 0.5;
}

#footer {
width: 800px;
height: 30px;
background-color: navy;
opacity: 0.6;
}

HTML :

Untitled Document