Problème de décallage vers le bas de la zone centrale

Bonjours,
J'ai un problème de décallage dans mon template en CSS. Je m'explique dans la partie gauche du site j'ai un menu de navigation, sur la partie droite j'ai une zone d'identification et en dessous un calendrier. Le problème c'est que lorsque je clique dans les menus ce qui devrait apparaitre dans la partie centrale du site apparait décallé vers le bas comme vous pouvez vous en rendre compte içi http://toniooo62.free.fr/dossiers/cat.php?val=9_vie+scolaire
De plus les titre dans la partie droite du site sont annormalement agrandis.

Voiçi le contenu du fichier php correspondant à la création de la partie droite et gauche:

<div id="gauche"> 
        <div class="menugauchetitre"> <span>Navigation</span> </div> 
        <!-- ArtiMenu vertical --> 
        <div class="menugauchecontenu"> 
          <ul id="navigv"> 
            <?php include("../menuauto/menuv.php"); ?> 
          </ul> 
        </div> 
      </div> 
      <div id="droite"> 
        <div class="menudroittitre"> <span>Identification</span> </div> 
        <div class="menudroitcontenu"> 
          <!-- identification --> 
          <?php echo $zone; ?> 
          <!-- Fin identification --> 
        </div> 
        <div class="menudroittitre"> <span>Calendrier</span> </div> 
        <div class="menudroitcontenu"> 
          <?php require_once '../agenda/calendrier.php'; echo calendar(); ?> 
        </div> 
      </div> 

Voiçi une partie du fichier CSS correspondant:

/* Agencement des pages */

#conteneur {
   width: 96%;
   margin: 2%;
   background-color: #FFFFFF;
   border: #000000 1px solid;
}

#header {
   height: 80px;
   background-color: #FFFFFF;
   border: 0;
   padding: 0.5em;
}

#logo {
   float: left;
   width: 33%;
   margin: 10px 0;
   text-align: center;
   font-size: 2em;
   font-weight: bold;
}

#banniere {
   float: right;
   width: 66%;
   margin: 10px 0;
   text-align: center;
   font-size: 2em;
   font-weight: bold;
}

#haut {
   height: 3em;
   background-color: #DFDFDF;
   border: 0;
   padding: 0;
}

#centre {
   background-color: transparent;
   margin-left: 11.2em; /* pour colonne gauche */
   margin-right: 15%; /* pour colonne droite */
   /*border-left: #000000 1px solid;*/
   padding: 0.5em;
   min-height: 400px;
}

* html #centre {
   height: 400px; /* hack uniquement interprété par IE Win+Mac */
} 

#gauche {
   float: left;
   width: 11.1em; /* largeur environ égale à marge gauche de #centre */
   /*border-right: #000000  1px solid;*/
   background-color: transparent;
   padding-bottom: 0.5em;
}

#droite {
   float: right;
   width: 15%; /* largeur égale à marge droite de #centre */
   background-color: #FFFFFF;
   text-align: center;
   line-height: 200px;
   font-size: 1em;
}

#bas {
   clear: both;
   position:relative;
   background-color: #DFDFDF;
   border: 0;
   padding: 0.5em;
   text-align: center;
}
	#bas ul {
      display: inline;
      border-right: 2px solid #000000;
   }
	#bas ul li {
      border-left: 2px solid #000000;
      display: inline;
      padding-right: 0.6em;
      padding-left: 1em;
   }
	#bas a {
      color: #006699;
   }
	#bas a:hover {
      color: #FF8000;
   }

#conception {
   display:inline;
   position:absolute;
   right:10px;
   top:3px;
   color:#006699;
   font-size:0.7em;
}

#pied {
   height: 2em;
   background-color: #FFFFFF;
   border: 0;
   padding: 0.75em;
	text-align: center;
   margin-bottom:1px;
}
	#pied a {
      color: #FF8000;
      font-weight: bold;
   }


/* temp.html */

div.menugauchetitre {
   clear: left;
   width:11.15em;
   color: #FFFFFF;
   font-weight: bold;
   background: #006699;
   height: 1.5em;
   margin-bottom: 1em;
   padding-left: 0;
   padding-top: 0.19em;
   text-align: center;
}
div.menugauchetitre span {
   font-size: 1.1em;
}

div.menugauchecontenu {
   clear: left;
   width:11.1em;
   color: #000000;
   font-weight: bold;
   line-height: 1.2em;
   margin-bottom: 1em;
}
   div.menugauchecontenu a {color: #006699; font-weight: normal;}
   div.menugauchecontenu a:hover {color: #FF8000; background: #FFFFFF; font-weight: normal;}
div.menudroittitre {
   clear: right;
   width: auto;
   color: #FFFFFF;
   font-weight: bold;
   background: #006699;
   height: 1.5em;
   padding-left: 0;
   padding-top: 0.19em;
   text-align: center;
}
div.menudroittitre span {
   font-size: 1.1em;
}

div.menudroitcontenu {
   clear: right;
   width: auto;
   color: #000000;
   font-weight: bold;
   line-height: 1.2em;
   }
   div.menudroitcontenu a {color: #006699; font-weight: normal;}
   div.menudroitcontenu a:hover {color: #FF8000; background: #FFFFFF; font-weight: normal;}

Je vous remerçie d'avance de m'aider dans mon problème, si quelqu'un trouve une solution à celle-çi.
Modifié par toniooo62 (12 Sep 2006 - 12:10)

Bonjour toniooo62 et bienvenue,

Comme indiquée dans les régles du forum, je t'invite à éditer ton post afin d'encadrer ton code à l'aide de la balise prévue à cet effet.
Modifié par Vero (12 Sep 2006 - 11:08)