Sommaire

Interdire le flottement CSS POUR LA MISE EN PAGE:Interdire le flottement

1. La problématique

Dès lors que vous utilisez des blocs flottants, vous pouvez rencontrer des problèmes de mise en page pour les blocs suivants. C’est un « problème » bien connu des intégrateurs Web. Vous devez interdire le flottement sur les éléments suivants les éléments flottants. Bootstrap nous propose d’utiliser la méthode micro clearfix de Nicolas Gallagher : http://nicolasgallagher.com/micro-clearfix-hack/

Pour bien illustrer ce « problème », voyons un exemple simple. Voici la structure sur laquelle notre exemple est basé :

  • Une boîte <div id="principal"> général. Elle contient :

  • Une boîte <div id="et"> pour un en-tête.

  • Une boîte <div id="contenu"> pour afficher le contenu. Cette boîte contient deux autres boîtes flottantes à gauche : <div id="gauche" class="fg"> et <div id="droite" class="fg">.

  • Une boîte <div id="pdp"> pour un pied de page.

Voici le code de la mise en page de départ :

<div id="principal"> 
   <div id="et"> 
      <p>Adipiscing Quam Condimentum Bibendum Purus</p> 
   </div> 
   <div id="contenu"> 
      <div id="gauche" ...