Problème de <div> affichage IE/Firefox

Bonjour,
Premier post sur le forum de ccm, et pourtant il m'a déjà beaucoup servi, donc tout d'abord merci !



Voila, comme je le dis dans l'objet, j'ai un problème d'affichage entre IE et Firefox... c tj galère, et pour une fois, c'est IE qui affiche ce que je veux !!
Le problème est d'afficher un div dans un autre div. Avant de vous expliquer, les preuves parlent plus : merci de faire un tour sur la page en question ici:

http://etudesjuniorisep.ovh.org/cardio_pmc/index.php?lien=cardiologues_pmc
Le site est en construction, le login est "visiteur", le mot de passe idem : "visiteur"


Sous IE pas de pb. Mais avec Firefox la taille du div que j'ai nommé "corps" ne s'ajuste pas à son contenu.

Voila comment je l'ai construit : plutôt que de faire un tableau dans <div id="corps">, j'ai créé dans ce corps un <div id="coordonnees_cardiologue" > dans lequel j'ai défini des <span class=""> pour définir les couleurs de fond.

Voici le code contenu dans <div id="corps"> :

<h1>Les coordonnées des médecins</h1>


     <div id="coordonnees_cardiologue">
     
     <span class="coordonnees_cardiologue_photo">
          <img  src="images/cardiologue_JPB.png" > </span>
     <span class="coordonnees_cardiologue_nom">
     Dr  </span>
     <span class="coordonnees_cardiologue_telephone">
     Secrétaire . . . . . . . . . . . . : 00.00.00.00.00<br>Fax . . . . . . . . . . . . . . . . . . : 00.00.00.00.00 </span>
<br>

     <span class="coordonnees_cardiologue_photo">
          <img  src="images/cardiologue_AK.png" > </span>
     <span class="coordonnees_cardiologue_nom">
     Dr </span>
     <span class="coordonnees_cardiologue_telephone">
     Secrétaire . . . . . . . . . . . . : 00.00.00.00.00<br>Fax . . . . . . . . . . . . . . . . . . : 00.00.00.00.00 </span>

     </div>

Et voici la partie du css en question :

/* le corps de la page */
#corps
{
   width: 580px;
   margin-left: 180px;
   margin-bottom: 20px;
   padding-top:5px;
   padding-bottom:25px;
   padding-left:20px;
   padding-right:20px;

   background-color: #EAECF5;
   background-image: url("../images/pied_de_page.png");
   background-repeat: no-repeat;
   background-position : bottom left;
}

/* le "talbeau" de coordonnées*/
#coordonnees_cardiologue
{
   width: 450px;
}
.coordonnees_cardiologue_photo
{
   width: 100px;
   height: 75px;
   margin-top: 20px;
   float:left;
}
.coordonnees_cardiologue_nom
{
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;

   width: 300px;
   height: 20px;
   padding-top:5px;
   padding-left:5px;
   padding-right:5px;
   margin-top: 20px;
   float:left;
   
   background-color: #8EDC88;
}
.coordonnees_cardiologue_telephone
{
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   width: 300px;
   height: 45px;
   padding-top:5px;
   padding-left:5px;
   padding-right:5px;
   float:left;
   
   background-color: #0694D2;
}

Ma question est simple : comment remédier à ce problème (pour ceux qui ne s'en souviennent plus, c'est le <div id="corps"> qui est plus court que son contenu) ?
Je ne suis qu'un petit débutant, donc s'il ne faut pas du tout s'y prendre comme ça, je ne vous en voudrais pas de me diriger vers un lien qui pourrais tout m'expliquer.

Un grand merci pour votre aide