186
Maîtrise des CSS
padding-right: 20px;
padding-top: 20px;
padding-bottom: 520px;
margin-bottom: 500px;
margin-left: 20px;
float: left;
display: inline;
background: url(/img/top.gif) #89ac10 top left no-repeat;
}
Figure 8.21
La bordure rouge délimite la div conteneur, afin que vous puissiez voir de quelle manière les trois
colonnes débordent de cet élément.
Pour.positionner.le.bas.des.colonnes.au.bon.endroit,.vous.devez.les.aligner.avec.le.bas.de.
l’élément.conteneur..Pour.cela,.vous.devez.d’abord.définir.le.contexte.de.positionnement.
en. attribuant. au.conteneur.un. positionnement. relatif.(position: relative)..Vous. pouvez.ensuite.attribuer.un.positionnement.absolu.aux.div.vides.et.la.valeur.0.à.leur.propriété.
bottom..Il.ne.reste.plus.qu’à.donner.aux.éléments.la.largeur.et.la.hauteur.adéquates.puis.à.
appliquer.l’image.du.bas.sous.forme.d’arrière-plan.
.wrapper {
width: 100%;
overflow: hidden;
position: relative;
}
.box {
width: 250px;
padding-left: 20px;
padding-right: 20px;