Probleme de flottant

Bonjour,
j'ai une nouvelle fois un problème de positionnement d'un flottant en float:left:
voici le html :
<!-- la bannière -->
<div id="banniere">

</div>
<div class="accueil"> <!--bloc 1-->
</div> <!-- fin bloc 1-->

<div id="colgauche"> <!--menu deroulant gauche-->
<div id="roundedcornr_box_500427"><!--boite menu deroulant gauche-->
<div id="roundedcornr_top_500427"><!--boite menu deroulant dessus-->
<div>
</div>
</div>
<div id="roundedcornr_content_500427"><!--boite menu deroulant contenu-->
<ul>
<li><a href=" index.html" title="accueil"><strong>Accueil</strong></a></li>

<li><a href="PCR.html" title="PCR"><strong>PCR</strong></a></li>
<li><a href="les_obligations_du_cabinet.html" title="les obligations du cabinet"><strong>Les obligations du cabinet dentaire</strong></a></li>
<li><a href="Les_formations_obligatoires.html" title="Les formations obligatoires"><strong>Les formations obligatoires</strong></a></li>
<li><a href="les_packs_proposes.html" title="les packs proposés"> <strong>Les packs proposés</strong></a></li>
<li><a href="Nous_consulter.html" title="Nous consulter"><strong>Nous consulter</strong></a></li>
</ul>

</div><!-- fin boite menu deroulant contenu-->
<div id="roundedcornr_bottom_500427"><!--boite menu deroulant dessous-->
<div>
</div>
</div><!--fin boite menu deroulant dessous-->
</div><!--fin boite menu deroulant gauche-->
</div><!--fin menu deroulant gauche-->

</body>
</html>

voici le css :
body {
width: 900px;
text-align:center;
margin: auto;
}
/*bannière*/
#banniere {
width:900px;
height:288px;
margin-left:auto;
margin-right:auto;
background: url(photos/ban.JPG) no-repeat;
}
/*fin bannière*/
img {
border: none;
}

/*menu*/

#colgauche {
float : left;
width:20%;
}
#colgauche ul {
list-style-type : none;
padding:0px 0 0 0; margin:0;
}
#colgauche li {
margin-top : 50px;
}
#colgauche a {
display:block;
width:180px;
text-decoration:none;
color: blue ;
line-height:25px;
width:130px;
border:none;
text-align:center;
}
#colgauche a:hover {
color:red;
}
#colgauche a:visited {
color : dark blue ;
}

#roundedcornr_box_500427 {
background: #edad30;
width:180px;
}
#roundedcornr_top_500427 div {
background: url(photos/roundedcornr_500427_tl.png) no-repeat top left;
}
#roundedcornr_top_500427 {
background: url(photos/roundedcornr_500427_tr.png) no-repeat top right;
}
#roundedcornr_bottom_500427 div {
background: url(photos/roundedcornr_500427_bl.png) no-repeat bottom left;
}
#roundedcornr_bottom_500427 {
background: url(photos/roundedcornr_500427_br.png) no-repeat bottom right;
}
#roundedcornr_top_500427 div, #roundedcornr_top_500427,
#roundedcornr_bottom_500427 div, #roundedcornr_bottom_500427 {
width: 100%;
height: 30px;
font-size: 1px;
}
#roundedcornr_content_500427 {
margin: 0 20px;
}
/* fin menu*/
.accueil {
margin-top:20px;
margin-left:25%;
padding:10px;

width:700%;
height:400px;

background-color:yellow;
}

(c'est un peu long car j'essaie de faire un menu avec des bords arrondis, mais le problème est que je ne comprends pas pourquoi le menu n'est pas directement à gauche du bloc texte (en jaune pour l'identifier plus facilement)
merci d'avance.