Vous êtes ici: Accueil / Informatique / Site Web / Astuce CSS / Trois Div.

Trois balises div. dans unE

Cette astuce concerne la mise en place de trois balises div à l'intérieur d'une div principale.

Constatation

Prenons pour exemple une barre de navigation contenant trois liens le tout dans un cadre.

  • Précédent (position gauche)
  • Haut de page (position centre)
  • Suivant (position droite)

Si vous procédez par ordre, vous commencer votre code par Précédent puis par Haut de page et pour finir Suivant.

Exemple:

Code html

<div id="RetourPage">
<div class="PosGauche"><a href="..."><img src="..." alt="" /></a></div>
<div class="PosCentre"><a href="..."><img src="..." alt="" /></a></div>
<div class="PosDroite"><a href="..."><img src="..." alt="" /></a></div> </div>

avec pour CSS

#RetourPage {
margin: 0px;
padding: 0px;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #666666;
border-bottom-color: #666666;
text-decoration: none;
}
.PosCentre {
text-align: center;
}
.PosGauche {
text-align: left;
float: left;
}
.PosDroite {
text-align: right;
float: right;
}

Mais voila, il y a un propblème avec Suivant qui ne se place pas au bonne endroit.

Remède

C'est très simple. Il suffit de placer Suivant entre Précédent et Haut de page au niveau de votre code html.

Exemple:

<div id="RetourPage">
<div class="PosGauche"><a href="..."><img src="..." alt="" /></a></div>
<div class="PosDroite"><a href=""..."><img src="..." alt="" /></a></div> <div class="PosCentre"><a href=""..."><img src="..." alt="" /></a></div>
</div>