169
Mise en page
.content .primary {
width: 650px;
padding-right: 20px;
float: right;
display: inline;
}
.content .secondary {
width: 230px;
float: left;
display: inline;
}
Comme.la.largeur.totale.disponible.est.de.920 pixels,.on.obtient.une.gouttière.virtuelle.de.
20 pixels.de.large.entre.les.éléments.flottants..Ainsi,.la.mise.en.page.ne.s’effondrera.pas.si.
le.contenu.déborde.de.manière.accidentelle..
Comme.ces.éléments.sont.flottants,.ils.ne.prennent.plus.d’espace.dans.le.flot.du.document.
et.le.pied.de.page.remonte.tout.en.haut..Pour.éviter.cela,.vous.devez.dégager.les.éléments.
flottants.en.appliquant.la.méthode.overflow.à.leur.élément.parent.soit,.ici,.la.div.content.
.content {
overflow: hidden;
}
Et.voilà.le.travail :.une.mise.en.page.CSS.simple.à.deux.colonnes.(voir.Figure 8.7).
Figure 8.7
Mise en page
flottante à
deux colonnes.