Bienvenue sur le site de Jef

L'utilisation des flottants nécessite une bonne compréhension de son fonctionnement pour éviter les débordements lorsque la fenêtre du navigateur est redimensionné ou que l'on zoom.

Redimension de la fenêtre (largeur variable)

Dans l'exemple qui suit, de nombreuses boites flottantes de largeur fixe (100px) sont placées dans une boite de largeur 100% de la fenêtre.

Code CSS:

.conteneur { width:100%;  border: 1px solid #FF8040; }
.flottante { float:left; width:100px; margin:2px; }

Code html:

<div class="conteneur">
  <p class="flottante">boîte verte 1</p>
  <p class="flottante">boîte verte 2</p>
  <p class="flottante">boîte verte 3</p>
  ...
  ...
  <p class="flottante">boîte verte 10</p>
</div>

Faites varier la dimension de la fenêtre, ou jouez avec le zoom (Ctrl + et Ctrl -).
Observez le résultat du débordement dans l'exemple suivant.

Redimension de la fenêtre (largeur fixe)

Maintenant, nous allons placer ces mêmes boites flottantes de largeur fixe (100px) dans une boite de largeur fixe de 800px.
C'est là, où il est important de comprendre le fonctionnement.
Chaque flottant fait 100px, mais il faut ajouter 4px. C'est à dire 2px à droite et 2px à gauche puisqu'il y a un margin:2px;
Si il y avait un border il faudrait aussi ajouter 2 fois la largeur de la bordure. Ainsi dans l'exemple qui suit, il n'est possible de mettre que 7 boites flottantes de 104px de large dans un conteneur de 800px.
Code CSS:

.conteneur { width:800px;  border: 1px solid #FF8040; }
.flottante { float:left; width:100px; margin:2px; }

Code html:

<div class="conteneur">
  <p class="flottante">boîte verte 1</p>
  <p class="flottante">boîte verte 2</p>
  <p class="flottante">boîte verte 3</p>
  ...
  ...
  <p class="flottante">boîte verte 10</p>
</div>

Faites varier la dimension de la fenêtre, ou jouez avec le zoom (Ctrl + et Ctrl -).
Il n'y a plus de débordement. Observez le résultat dans l'exemple suivant.

Les colonnes en flottant

Nous arrivons tout naturellement à la solution pour créer des colonnes dans un site.
Nous allons donc créer 3 colonnes de 300px de large contenues dans une boite de largeur variable à 100% de la largeur de la fenêtre.

Code CSS:

.conteneur 	 { width:100%; border: 1px solid #FF8040; }
.boite		 { float:left; width:300px; height:400px; margin:2px; }

Code html:

<div class="conteneur">
    <div class="boite"></div>
    <div class="boite"></div>
    <div class="boite"></div>
</div>

Faites varier la dimension de la fenêtre, ou jouez avec le zoom (Ctrl + et Ctrl -).
Observez le résultat dans l'exemple suivant.
Malheureusement, vous contatez que le conteneur est disgracieux sur la droite, et surtout qu'il y a débordement lorsque l'on joue sur le zoom ou la largeur de la fenêtre du navigateur. Il y a débordement de la colonne de droite qui a tendance à passer en dessous.

Si l'on veut garder absolument, la largeur du conteneur à 100%, mais éviter le débordement de la colonne de droite, il existe une solution:
Il suffit de rajouter le code min-width (largeur minimum) pour le conteneur.
Il faut donc calculer la largeur total des 3 colonnes. Une colonne fait 300px de large, auquelle il faut rajouter un margin de 2px. C'est à dire 2px à droite et 2px à gauche. D'où, 304px de large pour chaque colonne. Soit, une largeur totale minimum de 912px.

Code CSS:

.conteneur 	 { width:100%; min-width:912px; border: 1px solid #FF8040; }
.boite		 { float:left; width:300px; height:400px; margin:2px; }

Code html:

<div class="conteneur">
    <div class="boite"></div>
    <div class="boite"></div>
    <div class="boite"></div>
</div>

Faites varier la dimension de la fenêtre, ou jouez avec le zoom (Ctrl + et Ctrl -).
Il n'y a plus de débordement. Observez le résultat dans l'exemple suivant.


Mais, bien que les colonnes ne débordent plus, le conteneur est disgracieux à droite.

Code CSS:

.conteneur 	 { width:912px; border: 1px solid #FF8040; }
.boite		 { float:left; width:300px; height:400px; margin:2px; }

Code html:

<div class="conteneur">
    <div class="boite"></div>
    <div class="boite"></div>
    <div class="boite"></div>
</div>

La meilleure solution est de donner la bonne largeur au conteneur.
Faites varier la dimension de la fenêtre, ou jouez avec le zoom (Ctrl + et Ctrl -).
Il n'y a plus de débordement. Observez le résultat dans l'exemple suivant.