Div positioning with styles

I've added the following styles to fck_editorarea.css:

#home_categories {
   width:570px;
}
#home_categories div {
   float:left;
   width:190px;
   height:158px;
}
#home_categories img {
   margin-left:9px;
}
#home_categories a {
   color:#ffffff;
   font-weight:bold;
   text-decoration:none;
   margin:17px 0 0 10px;   
}
#home_categories a:hover {
   color:#b89400;
}

Then in the source I have:

<div id="home_categories">
  <div>
    <a href="#"><img height="94" border="0" width="170" alt="some text" title="some text" src="image1.jpg" /></a><br />
    <a href="#">some text</a></div>
  <div>
    <a href="#"><img height="94" border="0" width="170" alt="some text" title="some text" src="image2.jpg" /></a><br />
    <a href="#">some text</a></div>
</div>

These styles work in the webpage, the div's float left and appear on one line, but in the editor they appear one below the other and the links are standard blue underlined.

Any ideas please? The fck_editorarea.css is being referenced because I've changed the background to black in the body tag.