172
Maîtrise des CSS
display: inline;
}
.content .primary .primary {
width: 400px;
float: left;
display: inline;
}
.content .primary .secondary {
width: 230px;
padding-right: 20px; /* le remplissage est appliqué ici à la place */
float: right;
display: inline;
}
Voilà.qui.produit.une.élégante.et.robuste.mise.en.page.à.trois.colonnes.(voir.Figure 8.9).
Figure 8.9
Mise en page à
trois colonnes
réalisée à l’aide
d’éléments
flottants.
Mises en page à largeur fixe, liquide et élastique
Jusqu’ici,.tous.les.exemples.utilisaient.des.largeurs.définies.en.pixels..Ce.type.de.mise.en.
page,.dit.à largeur fixe,.est.très.courant,.car.il.offre.au.développeur.un.contrôle.complet.sur.
la.mise.en.page.et.le.positionnement..Si.vous.fixez.la.largeur.de.la.maquette.à.960 pixels.de.
large,.elle.fera.toujours.960 pixels.de.large..Si.vous.souhaitez.ensuite.placer.un.logo.en.haut.
de.la.page,.vous.savez.qu’il.devra.faire.960 pixels.pour.y.tenir..Le.fait.de.connaître.la.largeur.
exacte.de.chaque.élément.permet.de.les.disposer.précisément.et.de.savoir.où.chaque.partie.
Maîtrise des CSS
display: inline;
}
.content .primary .primary {
width: 400px;
float: left;
display: inline;
}
.content .primary .secondary {
width: 230px;
padding-right: 20px; /* le remplissage est appliqué ici à la place */
float: right;
display: inline;
}
Voilà.qui.produit.une.élégante.et.robuste.mise.en.page.à.trois.colonnes.(voir.Figure 8.9).
Figure 8.9
Mise en page à
trois colonnes
réalisée à l’aide
d’éléments
flottants.
Mises en page à largeur fixe, liquide et élastique
Jusqu’ici,.tous.les.exemples.utilisaient.des.largeurs.définies.en.pixels..Ce.type.de.mise.en.
page,.dit.à largeur fixe,.est.très.courant,.car.il.offre.au.développeur.un.contrôle.complet.sur.
la.mise.en.page.et.le.positionnement..Si.vous.fixez.la.largeur.de.la.maquette.à.960 pixels.de.
large,.elle.fera.toujours.960 pixels.de.large..Si.vous.souhaitez.ensuite.placer.un.logo.en.haut.
de.la.page,.vous.savez.qu’il.devra.faire.960 pixels.pour.y.tenir..Le.fait.de.connaître.la.largeur.
exacte.de.chaque.élément.permet.de.les.disposer.précisément.et.de.savoir.où.chaque.partie.
