Une histoire de float et de background-color
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).
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 :
<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 :
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
Tags : astuces, css, html, tuto.







Le 08/05/2008 à 11:25
Attention tout de même sous IE6 avec le clear:both; qui va réinitialiser tous les float de la page et pas seulement ceux dans le conteneur parent.
un “hack” alternatif existe pour y pallier : le clearfix -> http://smashingcoding.com/2007/11/05/partir-du-bon-pied-avec-les-css/
Le 12/11/2008 à 21:35
Script html
JSamrche Po
Pareil ici