Voici une petite astuce quand vous utilisez les flottants afin d’avoir un retour à la ligne et une couleur de fond les comprenant.
Imaginons que dans une div vous avez 2 flottants, un peu dans ce gout la :
<div style="background-color:blue">
<div style="float:left;background-color:red">Je flotte ! c’est un miracle</div>
<div style="float:left;margin-left : 10px;background-color:green">Moi aussi je flotte !</div>
</div>
Ce qui donne un truc du genre (j’ai ajouté des height pour que vous vous rendez mieux compte du truc).
Je flotte ! c’est un miracle Moi aussi je flotte !Bon c’est le bordel, mon texte se colle à droite la dernière div flottante et j’ai pas la couleur de fond sur toute la div générale…
Vous me direz pourquoi ne pas mettre la même couleur sur les div flottantes ? Tout simplement parce qu’elles n’auront pas forcément la même hauteur et après ça fera tout caca.
Le problème réside dans le fait que les flottants sortent du flux et ta div conteneuse est considérée comme vide. L’astuce est donc d’ajouter un element (p par exemple) sous tes 2 div et en lui donnant le style clear: both ; tu rétablis ainsi la hauteur voulue :
Script html<div style="background-color:blue">
<div style="float:left;background-color:red">Je flotte ! c’est un miracle</div>
<div style="float:left;margin-left : 10px;background-color:green">Moi aussi je flotte !</div>
<p style="clear: both"></p>
</div>
ce qui donne :
Je flotte ! c’est un miracle Moi aussi je flotte !Miracle ! Ca marche \o/
Bon c’est clairement une bidouille mais c’est efficace alors … ^^
Ah oui et biensur les style css sont à mettre dans un fichier externe, cela va de soit