171
Mise en page
Figure 8.8
Nous créons la
mise en page à
trois colonnes en
divisant la colonne
de contenu en
deux colonnes.
float: left
float: right
#secondaryContent
#mainContent
#content
#mainNav
#footer
Gouttière virtuelle
Comme.auparavant,.le.code.CSS.est.très.simple..Vous.devez.simplement.fixer.les.largeurs.
désirées.puis.faire.flotter.la.div.principale.à.gauche.et.la.div.secondaire.à.droite,.en.créant.un.
interstice.de.20 pixels.au.milieu :
.content .primary .primary {
width: 400px;
float: left;
display: inline;
}
.content .primary .secondary {
width: 230px;
float: right;
display: inline;
}
Vous.remarquerez.que.le.remplissage.côté.droit.que.nous.avons.attribué.à.la.div.principale.
dans.le.premier.exemple.est.maintenant.appliqué.à.la.nouvelle.div.principale.dans.le.second.
exemple..Nous.devons.donc.supprimer.le.remplissage.du.style.plus.général.et.l’appliquer.
directement.au.style.spécifique..
.content .primary {
width: 670px; /* largeur augmentée et remplissage supprimé */
float: right;
display: inline;
}
.content .secondary {
width: 230px;
float: left;