Je galère aussi...

Une histoire de float et de background-color

Posté par Sword dans CSS

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 :

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>
</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 :)


Tags : , , , .
Partager et découvrir : These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • Netvouz
  • DZone
  • ThisNext
  • MisterWong
  • Wists

2 commentaires

  1. Riri

    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/

  2. Required

    Script html

    JSamrche Po
    Pareil ici

Donne ton avis