FAQ CSSConsultez toutes les FAQ

Nombre d'auteurs : 17, nombre de questions : 59, dernière mise à jour : 30 mars 2017 

 
OuvrirSommaireTechniquesStructure

Un élément flottant (doté de la propriété float avec les valeurs left ou right) est partiellement retiré du flux normal vis-à-vis de son bloc conteneur.

Quelques solutions permettant à un conteneur d'englober ses enfants flottants :

Contexte de formatage bloc (spécifications CSS 2.1) :

Etablir un nouveau contexte de formatage bloc via overflow:hidden
Sélectionnez

#parent {
  border : 1px solid red;
  overflow : hidden; /* établir un nouveau contexte de formatage */
}
 
#enfant {
  float : left;
  background : green;
}
Code HTML correspondant
Sélectionnez

<div id="parent">
  <div id="enfant">
    Un enfant flottant
  </div>
</div>

Internet Explorer 6 n'établit pas de contexte de formatage mais reproduit un comportement similaire si l'élément est doté de Layout.
Sinon, on peut attribuer la propriété zoom avec la valeur 1 entre commentaires conditionnels :

Donner le Layout à l'élément sous Internet Explorer 6
Sélectionnez

<!--[if lte IE 6]>
  <style type="text/css" media="screen">
    #parent {
      zoom : 1; /* Confère le Layout */
    }    
  </style> 
<![endif]--> 

La propriété clear appliquée via le pseudo-élément after (ne fonctionne pas sous Internet Explorer 7 et 6):

clear:both attribué via :after
Sélectionnez

#parent {
  border : 1px solid red;
}
 
#parent:after {
  content : ""; /* On génère une chaine vide */
  display : block;
  clear : both;
}
 
#enfant {
  float : left;
  background : green;
}

La propriété clear appliquée à un élément block vide :

Utilisation d'une div vide doté d'un clear:both
Sélectionnez

#parent {
  border : 1px solid red;
}
 
#enfant {
  float : left;
  background : green;
}
.clear {
  clear : both;  
}
Code HTML correspondant
Sélectionnez

<div id="parent">
  <div id="enfant">
    Un enfant flottant
  </div>
 
  <div class="clear"></div>
</div>
Créé le 18 septembre 2009  par Macmillenium

Pour cela, nous allons avoir recours au positionnement absolu.

Il faut commencer par attribuer une hauteur de 100% aux éléments html et body, afin d'occuper toute la hauteur de la zone de visualisation.

Attribution de height:100% aux éléments html et body
Sélectionnez

html, body {
  margin : 0;
  padding : 0;
  height : 100%;
}

Ensuite, on crée un conteneur global qui occupe une hauteur minimale de 100%.
Ce conteneur sera le référent du footer positionné en absolu.

Conteneur global avec un min-height:100%
Sélectionnez

#wrapper {
  position : relative; /* référent du footer */
  min-height : 100%;
  background : green;
}

Et un conteneur ayant comme padding-bottom la hauteur du footer :

 
Sélectionnez

#container {
  padding-bottom : 6em; /* padding-bottom = hauteur du footer */
}

Internet Explorer 6 ne reconnait pas la propriété min-height mais interprète height de la même manière.
On peut attribuer height:100% entre commentaires conditionnels :

height:100% attribué entre commentaires conditionnels dans le head
Sélectionnez

<!--[if lte IE 6]>
  <style type="text/css" media="screen">
    #conteneur {
      height : 100%;
    }
  </style> 
<![endif]--> 

Enfin, on crée un footer positionné en absolu, en bas de son conteneur :

Conteneur global avec un min-height:100%
Sélectionnez

#footer {
  position : absolute;
  width : 100%; /* obligatoire si la largeur du footer n'est pas spécifiée explicitement dans le code CSS */
  height : 6em;
  bottom : 0; /* positionner le footer en bas */
  left : 0; /* positionner le footer à gauche */
  background : red;
}
Code HTML correspondant
Sélectionnez

<div id="wrapper">
  <div id="container">
    Contenu
  </div>
  <div id="footer">
    Footer en bas de page.
  </div>
</div>
Mis à jour le 8 octobre 2012  par Macmillenium

Une hauteur ou hauteur minimale en pourcentage (%) ne peut pas être calculée si la hauteur (pas de hauteur minimale) du parent direct n'est pas spécifiée explicitement. Par exemple :

 
Sélectionnez

html, body {
  margin : 0;
  padding : 0;
  height : 100%;
}
 
#parent {
  height : 100%;
  background : green;
}
 
#enfant {
  height : 50%;
  background : red;
}
 
Sélectionnez

<div id="parent">
  <div id="enfant">
    Bloc qui prend en référence la hauteur de son parent.
  </div>
</div>
  • body se réfère à la hauteur de son parent direct html ;
  • parent se réfère à la hauteur de son parent direct body ;
  • enfant se réfère à la hauteur de son parent direct parent ;
Créé le 18 septembre 2009  par Macmillenium
  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2004 Developpez.com Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.