Problème de float

Parmi les problèmes qu'on rencontre toujours en flottant les div, c'est que le bloc conteneur ne prend pas en compte les div flottant 'fils'.

juste à préciser , on rencontre ce problème sur les naviguateurs conformes aux standards , ce qui n'est pas le cas sur le Fameux naviguateur IE(celui qui joue toujours le méchant 'naviguateur':D )

Pour voir le problème , on va prendre un petit exemple :
----------------------------------------------------------------------------------

Notre style :

#conteneur{
border:1px solid red;
width:500px;
padding:10px;
margin-bottom:20px;
}

#conteneur .div1{
float:left;
background-color:green;
width:230px;
margin-right:10px;
}

#conteneu .div2{
float:left;
width:230px;
background-color:yellow;
}

NB : le code html n'est pas autorisé , alors vous essayé de créer la page

Alors vous allez remarqué que le conteneur ne prend pas en compte les deux div , et les blocs en dessous monte en haut ..
Alors pour résoudre ce problème , on a plusieurs choix :

La propriété "clear" ( qui va nous sauver de cette problèmatique de float ) permet de gérer le contenu autour des éléments flottants et peut "pousser" un conteneur pour intégrer les éléments en float, et on procèdera comme suit :

Notre style:

#conteneur{
border:1px solid red;
width:500px;
padding:10px;
margin-bottom:20px;
}

.div1{
float:left;
background-color:green;
width:230px;
margin-right:10px;
}
.div2{
float:left;
width:230px;
background-color:yellow;
}

.spacer{
clear:both;
}


Sur la page que vous avez déjà créer : on va ajouter un "div" ou un "br" ou un "hr" et on lui attribuera la classe "spacer" après le "div2".

la class spacer a comme prop : clear :).

Sinon on peut aussi faire appel à overflow, qu'on va mettre au div conteneur , et on procèdera comme suit :

Notre style :

#conteneur{
border:1px solid red;
width:500px;
padding:10px;
margin-bottom:20px;

overflow:hidden;

}

.div1{
float:left;
background-color:green;
width:230px;
margin-right:10px;
}
.div2{
float:left;
width:230px;
background-color:yellow;
}

Juste a noter que sur IE , nécessite parfois à définir la largeur du bloc qui aura la propriété overflow :)