Float problem IE/FF

Jeg har visualiseret mit problem her:
http://team-magnitude.dk/ffie.gif

kode:
<div id="service-content">
test test
</div>
<div id="spacer">
&nbsp;
</div>
<div id="service-tool">
test
</div>

css:
#service-content {
float: left;
width: 487px;
border-width: 1px;
border-style: solid;
border-color: #000000;
background-color:#000000;
margin-bottom: 9px;
z-index: 3;
}
#spacer {
width: 9px;
z-index: 3;
float: left;
background-color: red;
overflow: hidden;
}
#service-tool {
float: left;
width: 235px;
border-width: 1px;
border-style: solid;
border-color: #000000;
background-color: #000000;
margin-bottom: 9px;
  z-index: 3;
  overflow: hidden;
}

Problem:
Som du kan se på billedet giver IE og FF hver deres resultat når siden renderes. Det røde stykke, er min div "spacer" de 2 sorte er henholdsvis service-content og service-tool. Service-tool, altså den sorte boks set til højre, skal gerne flugte med den hvide kasse underneden.

Jeg har forsøgt med mange forskellige overflows og floats eksempler men hvis det ser godt ud i IE, så ligner det selvfølgelig lort i FF og omvendt.

Tak for din tid. :)