Deux divs côte à côte float:left. [Résolu/Fermé]

Signaler
Messages postés
233
Date d'inscription
jeudi 17 janvier 2008
Statut
Membre
Dernière intervention
25 novembre 2010
-
Messages postés
233
Date d'inscription
jeudi 17 janvier 2008
Statut
Membre
Dernière intervention
25 novembre 2010
-
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.

3 réponses

Messages postés
275
Date d'inscription
jeudi 17 janvier 2008
Statut
Membre
Dernière intervention
7 janvier 2017
26
BONSOIR il m'arrivait le mem soucis et comme parade je prenai le div de droite que je mettait en1er dans la partie HTML puis celui de gauche apres en mettan comme css
#droit{ widht:XXXpx;
float:right;
les autres atributs;}

#gauche{ float:left; les autres attributs}
Messages postés
1633
Date d'inscription
mercredi 18 février 2009
Statut
Membre
Dernière intervention
5 septembre 2012
109
Mets clear:both; dans la div parent des tes partie_gauche et partie_droite.
Messages postés
233
Date d'inscription
jeudi 17 janvier 2008
Statut
Membre
Dernière intervention
25 novembre 2010
42
Clear: both était présent j'avais simplement oublié de fermer une balise <div> d'où l'erreur. Je m'en suis rendu compte en tentent de valider la page aux W3C. Merci pour vos réponses. Bonne soirée.