Les feuilles de styles CSS
DEUXIÈME PARTIE
116
Un des nombreux avantages du positionnement flottant est la possibilité de placer
des blocs côte à côte. Transformer les deux paragraphes de l’exemple en flottants les
fait ainsi apparaître au même niveau (figure 7-17) :
Les deux paragraphes se trouvant désormais hors du flux normal, le bloc
DEUXIÈME PARTIE
116
Un des nombreux avantages du positionnement flottant est la possibilité de placer
des blocs côte à côte. Transformer les deux paragraphes de l’exemple en flottants les
fait ainsi apparaître au même niveau (figure 7-17) :
Les deux paragraphes se trouvant désormais hors du flux normal, le bloc
est
vide de tout contenu. Pour l’instant, il a reçu une hauteur explicite :
En l’absence d’une telle spécification, quel serait son comportement ? Réduisons
cette déclaration à 20 px, ce qui permettra d’observer le comportement du fond
jaune.
Sur Internet Explorer, le bloc
vide de tout contenu. Pour l’instant, il a reçu une hauteur explicite :
En l’absence d’une telle spécification, quel serait son comportement ? Réduisons
cette déclaration à 20 px, ce qui permettra d’observer le comportement du fond
jaune.
Sur Internet Explorer, le bloc
est alors « poussé » par le paragraphe le plus
long, mais c’est une mauvaise interprétation du comportement standard. Celui-ci est
observable sur d’autres navigateurs, comme Opera ou Firefox. Leur affichage est
repris figure 7-18.
Les deux paragraphes, désormais sortis du flux, n’interfèrent plus sur la hauteur du
bloc
long, mais c’est une mauvaise interprétation du comportement standard. Celui-ci est
observable sur d’autres navigateurs, comme Opera ou Firefox. Leur affichage est
repris figure 7-18.
Les deux paragraphes, désormais sortis du flux, n’interfèrent plus sur la hauteur du
bloc
. Sans le petit résidu de hauteur qu’on lui a accordé, il serait donc invisible.
p#premier {
float: left;
width: 100px;
background: #ccc;
}
p#second {
float: left;
width: 150px;
background: green;
}
Figure 7–17
Deux éléments
flottants placés
côte à côte
height: 200px;
p#premier {
float: left;
width: 100px;
background: #ccc;
}
p#second {
float: left;
width: 150px;
background: green;
}
Figure 7–17
Deux éléments
flottants placés
côte à côte
height: 200px;