Deux divs côte à côte float:left.

Bonjour à toutes et à tous,

J'ai un petit soucis avec deux div qui ne veulent pas se mettrent côte à côte malgrés qu'ils aient tous les deux la propriété float: left. Le div partie droite se met en desous du gauche. Je vous met mon CSS en dessous :

#partie_gauche { 
 width: 641px; 
 margin: 0px; 
 padding: 10px; 
 float: left;  
} 

#partie_droite { 
 width: 200px; 
 padding: 0px;  
 margin: 0px;  
 float: left;  
} 

Voilà si quelqu'un à une petite idée merci pour l'aide. Je vous met en dessous l'intégralité de mon CSS ainsi que le code HTML qui l'appelle.

CSS Intégral :

@charset "utf-8"; 
/* Présentation générale du design */ 
body { 
 background-color: #c5e1ef; 
 background-image: url(../design/normal/background_top.gif); 
 background-repeat: repeat-x; 
 background-position: top; 
 margin: 0px; 
 padding: 0px; 
 font-family: Verdana, Geneva, sans-serif; 
 font-size: 12px; 
 color: #6b6f71; 
  
} 

#div_principal { width: 899px; margin: auto; padding: 0px; } 

#div_menu {  
 width: 899px; 
 height: 125px; 
 margin: 0px;  
 padding: 0px;  
 background-image: url(../design/normal/menu_logo.gif); 
 background-repeat: no-repeat; 
} 

#div_centre { 
 width: 899px; 
 margin: 0px; 
 padding: 0px; 
 background-image: url(../design/normal/centre.gif); 
 background-repeat: repeat-y; 
 overflow: hidden;  
} 

#div_bottom_centre { 
 width: 899px; 
 height: 13px; 
 margin: 0px; 
 padding: 0px; 
 background-image: url(../design/normal/bottom_centre.gif); 
 background-repeat: no-repeat; 
 clear: both; 
} 

#partie_gauche { 
 width: 641px; 
 margin: 0px; 
 padding: 10px; 
 float: left;  
} 

#partie_droite { 
 width: 200px; 
 padding: 0px;  
 margin: 0px;  
 float: left;  
} 


div.title { 
 width: 631px; 
 height: 20px; 
 margin: 0px; 
 padding: 0px; 
 border-bottom: 1px solid; 
 border-color: #c5e1ef;  
} 

h1.title_art { 
 font-family: Verdana, Geneva, sans-serif; 
 font-size: 14px;  
 font-weight: bold; 
 color: #3e6171; 
 text-decoration: none; 
 padding: 0px; 
 margin: 0px;  
} 

div.contenu_news {/*Parrution du blog*/ 
 width: 631px; 
 margin-top: 15px;  
 padding: 0px;   
} 

p.justify {  
 text-align: justify; 
 padding-top: 10px; 
 margin: 0px; 
} 

/* Menu */ 
#menu { 
 width: 899px; 
 margin: 0px; 
 padding-top: 10px; 
} 

a.menu { 
 font-family: Verdana, Geneva, sans-serif; 
 font-size: 18px;  
 font-weight: bold; 
 color: #c6dbe5; 
 text-decoration: none; 
} 

a.menu:hover { 
 font-family: Verdana, Geneva, sans-serif; 
 font-size: 18px;  
 font-weight: bold; 
 color: #b3c9d4; 
 text-decoration: none; 
} 

<div id="div_principal"> 

 <div id="div_menu"> 
     <div id="menu"> 
         <a href="#" class="menu">Blog     </a>  
            <a href="#" class="menu">Tutoriels     </a>  
            <a href="#" class="menu">Articles     </a>  
            <a href="#" class="menu">Contact     </a>  
            <a href="#" class="menu">Donnation     </a>  
            <a href="#" class="menu">Boutique</a>  
        </div> 
    </div> 
     
    <div id="div_centre"> 
     <div id="partie_gauche"> 
         
          
         <div class="title"><h1 class="title_art">Drop box, la boïte magique</h1><div>  
            <div class="contenu_news"> 
             <img src="images/blog/news/drop_box.jpg" alt="Drop Box, la boïte magique !" /> 
                <p class="justify"> 
                 
                </p> 
            </div>     
             
       
        </div> 
         
        <div id="partie_droite">Droite</div> 
    </div> 
     
     
     
     
</div> 

Merci encore.