Margin nach oben weg?!

[Albert]

Folgendes Problem, habe nun versucht ein ganz einfaches Layout mithilfe von CSS zu realisieren. Es gibt eine Divbox die hat die Hintergrundfarbe schwarz und darin liegt eine andere divbox (möchte damit einen schwarzen rand erzeugen) und in dieser anderen divbox liegen wiederum 2 divboxen die mithilfe von float:left und float:right angeordnet wurden innerhalb dieser box. Jedoch wird nun der schwarze rand oben irgendwie "abgeschnitten" oder ist zumindst nicht sichtbar im opera und firefox im IE7 funktioniert es sonderbarerweise... nunja hier ist der css code:

#mitarbeiterborder {
 width:404px;
 height:204px;
 margin:0px;
 margin-left:188px;
 padding:0px;
 background-color:#000000;
}
/*mitarbeiterbox*/
#mitarbeiter{
 width:400px;
 height:200px;
 margin:2px;
 padding:0px;
 background-color:#FFFFFF;
}
/*box fuer das foto des mitarbeiters */
#foto{
 float:left;
 width:100px;
 height:150px;
}
/*beschreibung des mitarbeiters */
#beschreibung{
 float:right;
 width:230px;
 height:150px;
}

und der dazugehörende HTML code:

<div id="mitarbeiterborder">
     <div id="mitarbeiter">
      <div id="foto">
       <img src="" width="112px" height="150px" />
      </div>
      <div id="beschreibung">
      beschreibung des mitarbeiters
      </div>
     </div>
    </div>