DIV IMG IE / Firefox leerzeile

[Lifestyle]

ich habe folgendes Problem:

ich hab in einer Webseite ein Image welches unter drei gefloatetn divs left steht.
Das Image wurde mit clear left in die nächste Zeile gelegt.

Wenn ich nun etwas unter das img positionieren will, ist immer ein 2-3 px breiter Rand dazwischen.

Nachfolgend der Code:

  
<div id="balken_links">  
</div>  
<div id="grau_mitte">Test1  
</div>  
<div id="balken_rechts">  
</div>  
<img id ="header_bild" src="http://www.toll.de/image.jpg"/>  
<div id="balken_links2">  
</div>  
<div id="balken_mitte2">Test2  
</div>  
<div id="balken_rechts2">  
</div>  

Nachfolgend das CSS:

  
      #balken_links {  
      background-color: #83BAE1;  
      width: 15px;  
      height: 20px;  
      float:left;  
      }  
  
      #grau_mitte {  
      color: white;  
      font-family: arial,helvetica;  
      font-size:12px;  
      font-weight:bold;  
      background-color: #c6bdb9;  
      width: 570px;  
      height:20px;  
      float:left;  
      }  
  
      #balken_rechts {  
      background-color: #83BAE1;  
      width: 30px;  
      height:20px;  
      float:left;  
      }  
  
      #header_bild{  
      clear:left;  
      width:615px;  
      height:89px;  
  
      }  
      #balken_links2 {  
      background-color: #83BAE1;  
      width: 15px;  
      height: 40px;  
      }  
  
      #balken_mitte2 {  
      font-family: arial,helvetica;  
      font-size:12px;  
      font-weight:bold;  
      background-color: #c6bdb9;  
      width: 570px;  
      height:40px;  
  
      }  
  
      #balken_rechts2 {  
      background-color: #83BAE1;  
      width:30px;  
      height:40px;  
      }

Irgendwelche Ideen ?? Ich bekomme einfach den Abstand zwischen dem Bild und den folgenden DIVS nicht weg.