We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

À l'origine conçue pour faire flotter des images à l'intérieur d'un bloc de texte, la propriété float est devenue un des outils les plus communément utilisé pour créer de multiples dispositions en colonnes sur des pages web. Cet article explique tout.

>

Prérequis: Les bases du HTML (étudiez Introduction au HTML), et une idée de la manière dont fonctionne CSS (étudiez Introduction au CSS.)
Objectif: Apprendre comment rendre possible le flottement tel que des lettrines, des images flottantes, et la mise en page de multiples colonnes sur une page web.

Le contexte des flottantsEdit

À l'origine, la propriété float a été introduite pour permettre aux développeurs web d'implémenter des dispositions simples impliquants une image flottante à l'intérieur d'une colonne de texte, avec le texte enveloppant cette image autour par la gauche ou la droite. Le genre de choses que vous pourriez avoir dans la mise en page d'un journal d'informations.

Mais les développeurs web se sont vite rendus compte que l'on pouvait faire flotter n'importe quel élément, pas seulement les images, et c'est ainsi que l'utilisation de float s'est élargie. Notre exemple fantaisiste dans un paragraphe précédemment dans le cours montre comment vous pouvez utiliser float dans la création d'un effet de lettrine.

Les flottants (floats) sont couramment utilisés ces derniers temps pour créer des dispositions entières de sites web pouvant contenir de multiples colonnes d'informations flottantes de telles sortes qu'elles soient positionnées les unes aux cotés des autres (le comportement par défaut est un positionnement des colonnes les unes en-dessous des autres, dans le même ordre qu'elles apparaissent dans le code source). Il y a des nouvelles, meilleures techniques de mises en page disponibles, que nous découvrirons plus tard dans ce module, mais les flottants demeurent d'anciens favoris, parce ce qu'ils sont supportés d'aussi loin que Internet Explorer 4.

 

Un exemple simple de flottantEdit

Découvrons comment utiliser les flottants. Nous commencerons par un exemple très simple impliquant de faire flotter un bloc de texte autour d'une image. Vous pouvez suivre tout du long en créant un nouveau fichier index.html sur votre ordinateur, le remplissant avec un simple modèle HTML, et en y insérant le code ci-dessous à la bonne place. Au bas de la section vous pouvez directement voir un exemple du  code final.

Tout d'abord, nous allons commencer avec du simple HTML — ajoutez le code ci-dessous dans la balise body de votre code HTML, en enlevant tout ce qui s'y trouvait avant:

 

<h1>Simple float example</h1>

<img src="https://mdn.mozillademos.org/files/13340/butterfly.jpg" alt="A pretty butterfly with red, white, and brown coloring, sitting on a large leaf">

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>

<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

Maintenant, appliquez le CSS suivant à votre HTML (en utilisant une balise <style> ou un élément <link> reliant le HTML à un fichier .css séparé — c'est votre choix):

body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

p {
  line-height: 2;
  word-spacing: 0.1rem;
}

Si vous sauvegardez et rafraîchissez maintenant, vous verrez quelque chose qui ressemble mieux à ce que vous espériez — l'image se tient au-dessus du texte, lequel actuellement ne ressemble pas à grand chose. Nous pourrions le centrer dans son conteneur, mais à la place, nous allons faire flotter le texte autour en utilisant un flottant. Ajoutez la règle suivante au-dessous de vos précédentes règles:

img {
  float: left;
  margin-right: 30px;
}

Maintenant si vous sauvegardez et rafraîchissez vous verrez quelque chose comme ce qui suit:

À présent, réfléchissons comment le flottant fonctionne — l'élément avec le flottant définit sur lui (l'élément <img> dans ce cas) est sorti de son contexte de disposition normal dans le document et collé du coté gauche de son conteneur parent (<body>, dans ce cas). N'importe quel contenu qui viendrait en dessous de l'élément flottant dans le flux de disposition normal sera enveloppé autour de lui, remplissant l'espace à sa droite et aussi haut que possible par rapport à l'élement flottant. A ce moment là, il s'arrête.

Remarquez que le contenu flottant obéit toujours au comportement normal de boîte tel que les marges et les bordures. Nous mettons un peu de marge sur l'image afin d'empêcher le texte de se positionner à sa droite à côté de lui.

Rendre flottant le contenu sur la droite a le même effet, mais dans l'autre sens — l'élément flottant collera à droite, et le contenu s'enveloppera autour de lui par la gauche. Essayez de changer la valeur du flottant par right et remplacer margin-right avec margin-left dans le dernier ensemble de règles et observez le résultat.

Réadaptation de notre exemple de lettrine

Comme mentionné au-dessus, notre précédent exemple fantaisiste de paragraphe vu plus tôt dans le cours offrait une jolie petite lettrine. Pour cet exemple nous avons un paragraphe simple:

<p>This is my very important paragraph.
 I am a distinguished gentleman of such renown that my paragraph
 needs to be styled in a manner befitting my majesty. Bow before
my splendour, dear students, and go forth and learn CSS!</p>

Notre CSS ressemble à ceci:

p {
  width: 400px;
  margin: 0 auto;
}

p::first-line {
  text-transform: uppercase;
}

p::first-letter {
  font-size: 3em;
  border: 1px solid black;
  background: red;
  float: left;
  padding: 2px;
  margin-right: 4px;
}

Et dont le résultat concret est le suivant:

L'effet produit ici n'est pas très différent de ce que nous avions dans notre premier exemple avec l'image — cette fois cependant nous faisons flotter le reste du paragraphe autour de sa première lettre, après avoir aggrandi, rendu grasse et intéressante la lettre en question.

Vous pouvez très bien faire flotter n'importe quoi, aussi longtemps qu'il y a de la place pour les deux éléments de se tenir l'un à coté de l'autre. Cela nous mène tout naturellement à parler plus en détails à propos de la mise en page de nombreuses colonnes.

La mise en page de nombreuses colonnes flottantes

Les flottants ont communément été utilisés pour créer des mises en page de nombreuses colonnes et le sont depuis longtemps, en partie par le fait qu'ils ont été largement pris en charge par les navigateurs. Cela en dépit du fait qu'ils n'étaient pas prévus pour cette fonction, et qu'ils ont quelques effets de bord innatendus qui doivent être pris en compte, comme vous pourrez le voir plus tard dans cet article.

Une disposition à deux colonnes

Commençons avec l'exemple le plus simple possible — une disposition à deux colonnes. Vous pouvez suivre tout du long en créant un nouveau fichier index.html sur votre ordianteur, en le remplissant avec cette structure HTML simple, et en insérant le code ci-dessous aux endroits appropriés. Au bas de la section, vous pouvez voir en direct un exemple du résultat final de ce code.

Premièrement, nous avons besoin de mettre du contenu dans nos colonnes. Remplacer tout ce qu'il y a actuellement dans le <body> avec ce qui suit:

<h1>2 column layout example</h1>
<div>
  <h2>First column</h2>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
</div>

<div>
  <h2>Second column</h2>
  <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>

Chacune de ces colonnes a besoin d'un élément extérieur pour maintenir son contenu et de pouvoir toutes les manipuler en une fois. Dans cet exemple nous avons choisi <div>, mais vous pourriez choisir quelque chose de plus approprié sémantiquement comme <article><section>, et <aside>, ou d'autres.

Maintenant pour le CSS. Tout d'abord, apppliquez ce qui suit à votre HTML pour fournir une configuration de base:

body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

Le body aura 90% de la largeur de la fenêtre d'affichage (viewport) jusqu'à ce qu'il arrive à 900px de largeur, dans ce cas là il restera fixe à cette largeur et se centrera de lui-même dans la fenêtre d'affichage. Par défaut, ses enfants (<h1> et les deux <div>) s'étendront à 100% de la largeur du body. Si nous voulons que les deux <div> soient flottants l'un à coté de l'autre, nous avons besoin de déclarer leur largeur pour un total de 100% de la largeur de leur élément parent ou plus petit pour leurs permettre de se tenir côte à côte. Ajoutez ce qui suit tout en bas de votre CSS:

div:nth-of-type(1) {
  width: 48%;
}

div:nth-of-type(2) {
  width: 48%;
}

Ici nous avons les deux à 48% de la largeur de leur parent — ce total de 96% nous laisse 4% de libre pour jouer le rôle d'une gouttière entre les deux colonnes, donnant au contenu un peu d'espace pour respirer. Maintenant nous avons juste besoin de faire flotter les colonnes, comme ceci:

div:nth-of-type(1) {
  width: 48%;
  float: left;
}

div:nth-of-type(2) {
  width: 48%;
  float: right;
}

Combiner le tout ensemble devrait nous donner un résultat comme celui-ci:

Vous remarquerez ici que nous sommes en train d'utiliser les pourcentages pour toutes les largeurs — c'est une assez bonne stratégie, parce que cela créé une disposition fluide, une de celles s'ajustent à différentes fenêtres d'affichage et gardent les mêmes proportions pour les largeurs de colonnes sur les écrans de tailles plus petites. Essayez d'ajuster la largeur de votre fenêtre de navigateur pour le voir de vous même. C'est un outil précieux pour une conception de site web adaptatif, que nous verrons plus tard dans un futur module.

Remarque: Vous pouvez voir cet exemple s'exécutant à 0_two-column-layout.html (voir aussi le code source).

Une chose dont vous devez être au courant est que l'aspect des  colonnes commence à se dégrader lorsqu'elles deviennent très étroites. Il est plus judicieux de changer pour une mise en page à une colonne pour les petits écrans (comme les téléphones mobiles), ce qui peut accompli en utilisant les demandes de renseignements sur le media (media queries). Encore une fois, vous en apprendrez plus sur le sujet dans le futur module de conception de sites web adaptatif (responsive web design).

L'autre option serait de configurer les largeurs à une unité fixe comme rem ou les pixels — vous pouvez voir un exemple au travers de ce lien two-column-layout-fixed.html (voir le code source), ou convertir votre propre exemple en enlevant la déclaration de max-width, et en changeant les largeurs de 900px, 430px, et 430px respectivement. On appelle ceci la mise en page à largeur fixe (fixed-width layout) — si vous ajustez à présent votre taille de navigateur, vous verrez que la mise en page ne s'ajuste plus pour s'adapter à la taille de la fenêtre, et vous devrez faire défiler la page pour voir la totalité à des tailles plus petites.

Nous nous en tiendrons à de la mise en page fluide à partir de maintenant.

Une disposition à trois colonnes

Une fois que vous avez une mise en page à deux colonnes qui fonctionne, ajouter une troisième colonne (voir plus) n'est vraiment pas plus difficile. Il vous suffit d'ajouter une autre colonne à l'intérieur du même élément parent que les autres. Commencez par ajouter le <div> suivant juste après les deux autres (ou utilisez 0_two-column-layout.html comme point de départ):

<div>
  <h2>Third column</h2>
  <p>Nam consequat scelerisque mattis. Duis pulvinar dapibus magna, eget congue purus mollis sit amet. Sed euismod lacus sit amet ex tempus, a semper felis ultrices. Maecenas a efficitur metus. Nullam tempus pharetra pharetra. Morbi in leo mauris. Nullam gravida ligula eros, lacinia sagittis lorem fermentum ut. Praesent dapibus eros vel mi pretium, nec convallis nibh blandit. Sed scelerisque justo ac ligula mollis laoreet. In mattis, risus et porta scelerisque, augue neque hendrerit orci, sit amet imperdiet risus neque vitae lectus. In tempus lectus a quam posuere vestibulum. Duis quis finibus mi. Nullam commodo mi in enim maximus fermentum. Mauris finibus at lorem vel sollicitudin.</p>
</div>

Maintenant mettez à jour votre CSS comme celui-ci:

body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

div:nth-of-type(1) {
  width: 36%;
  float: left;
}

div:nth-of-type(2) {
  width: 30%;
  float: left;
  margin-left: 4%;
}

div:nth-of-type(3) {
  width: 26%;
  float: right;
}

Cela nous donnera le résultat suivant:

Il y a très peu de choses que nous n'ayons vu avant; l'unique différence et que l'on a cette colonne supplémentaire avec laquelle il faut s'ajuster — pour qu'elle s'adapte au bon endroit nous l'avons fait flotter à gauche; nous lui avons aussi donné un margin-left de 4% pour créer une gouttière entre la première et la seconde colonne. Nous avons configuré les largeurs de colonnes pour qu'elles tiennent toutes ensemble — 36% + 30% + 4% + 26% = 96%, ce qui nous laisse 4% pour former une gouttière entre la seconde et la troisième colonne (cette gouttière naturelle apparaîtra toujours à l'endroit entre la colonne gauche flotttante et celle de droite, peu importe l'endroit où elles se trouvent).

Une chose à remarquer ici est vous devez réfléchir avec précaution dans quel ordre vous placez vos colonnes, et comment elles flottent, pour obtenir le résultat souhaité. Votre contenu doit faire sens quand il est lu dans son ordre source aussi bien que dans sa disposition visuelle; cependant, utiliser des flottants peut altérer la disposition visuelle de celle de l'ordre source. Pour illustrer ce que nous disons, essayez de changer la valeur de float pour la deuxième colonne  en right (ou regardez le au travers de three-column-layout-wrong-order.html (code source)). Vous verrez que l'ordre visuel dorénavant se présente comme ceci:

div1  div3  div2

Tandis qu'une personne malvoyante utilisant un lecteur d'écran pour écouter votre contenu, par exemple, continuera d'entendre le contenu dans cet ordre là:

div1 div2 div3

La mise en page du contenu et du style ne fait aucune différence  pour eux. Le contenu doit faire sens indépendamment de la consommation que vos utilisateurs en font.

Remarque: Vous pouvez trouver l'exemple fini à ce stade ici 1_three-column-layout.html (voir le code source).

Réinitialisation des flottants

À présent vous avez déjà commencer à voir comment les flottants peuvent être amusants. Cependant, vous allez très tôt commencer à rencontrer un problème — tout ou partie du contenu au-dessous des flottants qui n'est pas un flottant lui-même s'enveloppera autour des éléments flottés, ce qui aura un effet désastreux si cet effet n'est pas traité. Pour illustrer ce que nous disons, essayez d'ajouter le HTML suivant au-dessous de votre troisième élément <div> (et jetez un oeil sur 2_float-disaster.html (code source)).

<footer>
  <p>&copy;2016 your imagination. This isn't really copyright, this is a mockery of the very concept. Use as you wish.</p>
</footer>

Vous verrez que le pied de page s'enveloppe autour de l'espace à coté de la plus large colonne, ce qui à un effet désastreux — nous voulons vraiment que le pied de page reste au bas de la page, en dessous de toutes les colonnes. Hé bien, heureusement il y a un moyen facile de résoudre ce problème — la propriété  clear. Lorsque vous l'appliquez à un élément, cela indique basiquement "plus de flottement ici" — cet élément et ceux après lui dans le code source ne flotteront plus, à moins que vous n'appliquiez une nouvelle déclaration float à un autre élément après lui.

Ainsi, pour résoudre notre problème, ajoutez la règle suivante à votre CSS:

footer {
  clear: both;
}

Cela nous donne un pied de page qui se conduit comme tel et se pose en dessous des colonnes, comme il devrait:

clear peut prendre trois valeurs:

  • left: Arrête les flottements gauche actifs
  • right: Arrête les flottements droit actifs
  • both: Arrête les flottements gauche et droits actifs

Vous voudrez habituellement définir clear: both sur l'élément où vous voulez que le flottement s'arrête; dans certains cas vous voudrez seulement annuler le flottements left ou right.

Remarque: Vous pouvez trouver un exemple de cet endroit du cours ici 2a_fixed-by-clear.html (voir le code source).

Les problèmes du flottant

La section au-dessous a fourni une base pour créer de simples mises en page avec les flottants, mais il y a quelques problemes quis doivent être abordés. Regardons les problèmes les plus courants:

La largeur totale peut être compliquée à calculer

Nos exemples depuis le début nous ont montrés les boîtes flottantes sans aucun style appliqués sur eux — c'est facile. Les ennuis commencent lorsque vous commencez à vouloir donner du style à vos boîtes — ajoutant des arrière-plans, des bordures, des marges intérieures, et ainsi de suite. Pour illustrer le problème, essayez d'ajouter ce qui suit dans votre CSS (vous pouvez également voir l'exemple sur 3_broken-layout.html (code source)):

div, footer {
  padding: 1%;
  border: 2px solid black;
  background-color: red;
}

À ce stade, vous verrez que votre mise en page s'est dégradée — à cause de la largeur supplémentaire induite par la marge intérieure et la bordure, les trois colonnes ne tiennent plus en place sur une ligne, ainsi la troisième colonne descend en-dessous des deux autres. Ouch!

Il y a de nombreuses manières de réparer ça. Le meilleur moyen et d'ajouter ce qui suit à votre CSS:

* {
  box-sizing: border-box;
}

box-sizing nous vient en aide en transformant le modèle de boîte. Ainsi la largeur de la boîte est comprise comme contenu + marge intérieure + bordure + marge extérieure, et pas seulement le contenu — et donc ajouter de la marge intérieure et de la bordure ne rendra pas la boîte plus large — cela force juste le contenu à s'adapter plus étroitement.

À ce stade nous avons un autre problème — le pied de page est pressé jusqu'à la plus longue colonne, ce qui n'est pas l'idéal — essayons de corriger ça en donnant au pied de page un peu de margin-top pour aller avec sa réinitialisation de flottement:

footer {
  clear: both;
  margin-top: 4%;
} 

Toutefois ça ne fonctionne pas — les éléments flottants existent à l'extérieur du flux normal de disposition du document, et se comportent plutôt étrangement de plusieurs façons:

  • Pour commencer, la zone qu'ils n'occupent plus à l'intérieur de leur élément parent a une hauteur effective de 0 — essayer de lancer 1_three-column-layout.html dans votre navigateur et inspecter la hauteur de l'élément <body> en utilisant vos outils de développeur, et vous verrez ce que nous voulons dire — la hauteur du body est indiquée comme la hauteur de l'élément <h1> uniquement. Cela peut être corrigé de plusieurs manières, mais celle sur laquelle on peut compter est de réinitialiser le flottant au bas de son conteneur parent, comme nous l'avons fait dans notre exemple actuel. Si vous inspectez la hauteur du body dans votre exemple actuel, vous devriez voir que sa hauteur se définit d'elle-même.
  • Ensuite, vous pouvez vous servir des marges sur les éléments non flottants pour créer un espace entre eux et les éléments qui flottent — c'est le problème que l'on a ici dans l'immédiat, et pour lequel nous implémenterons une correction au-dessous.
  • Il y a d'autre choses bizarres à propos des flottants — l'excellent article de Chris Coyier Tout sur les flottants nous en montre beaucoup d'autres, y compris leurs corrections.

Alors, corrigeons ça! Tout d'abord, ajouter le nouveau <div> suivant dans votre HTML, juste au-dessus du pied de page:

<div class="clearfix"></div>

Ajouter un div de "réinitialisation invisible" après des flottants est très utile si vous n'avez pas d'élément disponible pour réinitialiser vos flottants avec (comme le pied de page), mais c'est aussi utile ici. La prochaine chose que nous devrions faire est de déplacer la déclaration clear: both; en dehors des règles qui stylisent notre pied de page, et de la déplacer vers notre div de réinitialisation:

.clearfix {
  clear: both;
}

À présent, nous avons une superbe marge extérieure en haut de notre pied de page, mais nous avons également un autre problème — le div de réinitialisation se voit attribuer le même arrière-plan, la même marge intérieure, et la même bordure que notre colonne et notre pied de page! Pour corriger ça, donnons en premier lieu à chacun de nos div de colonnes une class de column:

<div class="column">
  ...
</div>

Maintenant, changeons notre règle qui applique le style de boîte à nos div et à notre pied de page pour qu'ainsi seulement nos div de colonnes soient stylisés:

.column, footer {
  padding: 1%;
  border: 2px solid black;
  background-color: red;
}

Ce sera tout pour les corrections pour le moment.

Remarque: À ce stade, l'exemple final de fixation peut être vu à 4_fixed-layout-border-box.html (code source).

Un autre petit détail à remarquer ici est que box-sizing fonctionne d'aussi loin que depuis Internet Explorer 8 — si vous avez à tout prix besoin de prendre en charge les anciens navigateurs, vous pourriez avoir besoin d'ajuster la largeur des colonnes manuellement pour utiliser la largeur des marges intérieurs et la largeur des bordures. Ce n'est pas une technique très préçise, en particulier en considérant que vous ne pouvez pas dimensionner en utilisant les pourcentages — vous avez seulement besoin de définir assez d'espace lorsque vous indiquez la largeur. Vous pouvez voir un tel correctif en action à fixed-layout-adjusted-percentages.html (voir le code source).

La gestion de la hauteur des éléments flottants

Bon, l'exemple que nous avons construit jusqu'à maintenant fonctionne, mais un autre problème est que les largeurs de colonnes sont différentes — ce serait mieux si les colonnes avaient toutes la même hauteur.

Nous pouvons corriger ça en donnant à toutes les colonnes une height fixe (voir 5_fixed-height-columns.html (code source)):

.column {
  height: 550px;
}

Ce n'est pourtant pas l'idéal dans plusieurs situations — cela rend la disposition inflexible. C'est très bien si vous pouvez garantir que les colonnes auront toujours la même taille de contenu à l'intérieur, mais ce n'est pas toujours le cas — le contenu change régulièrement sur de nombreux types sites.

Les nouvelles technologies de disposition comme les boîtes flexibles ont été conceptualisées exactement pour résoudre ces types de problèmes. Les boîtes flexibles (Flexbox) peuvent automatiquement s'étendre dans les colonnes pour qu'elles soient aussi longues que la plus longue des colonnes.

Vous pourriez aussi considérer:

  1. Définir la couleur d'arrière-plan des colonnes de la même couleur que celle du parent, ainsi vous ne pouvez pas voir que les hauteurs sont différentes. C'est une autre meilleure option pour l'instant.
  2. Les définir à une hauteur fixe et faire en sorte que le contenu défile en utilisant overflow (voir notre exemple dans notre section sur overflow).
  3. Utiliser une technique appelée "faux columns" — cela implique de retirer l'arrière-plan (et les bordures) de l'actuelle colonne, et de dessiner un faux arrière-plan dans l'élément parent de la colonne et qui ressemblerait à l'arrière-plan de la colonne. Malheureusement, ça ne permettrait pas de gérer les bordures de la colonne. Voir Faux Columns pour plus d'informations sur ce sujet.

Réinitialiser les flottants peut être compliqué

La réinitialisation dans le simple exemple que nous avons mis en oeuvre au travers du cours de l'article est facile à comprendre, mais réinitialiser peut devenir beaucoup plus compliqué. Vous devez vous assurer que tous les flottants soient réinitialisés dès que possible pour éviter qu'ils ne créer d'ennuis pour le contenu plus tard. Utiliser des div de correction pour réinitialiser lorsque c'est nécessaire, si vous n'avez pas de conteneur adapté sur lequel placer cette réinitialisation.

Résumé

À ce stade, vous devriez déjà avoir plusieurs outils puissants à votre disposition pour créer des mises en page complexes convenables. Excellent! Dans l'article suivant, nous irons plus loin en regardant le positionnement.

 

Dans ce module

 

Étiquettes et contributeurs liés au document

Contributeurs à cette page : Alan_Braut
Dernière mise à jour par : Alan_Braut,