INFOS-AREA
  Aligner des éléments sans tableaux
 

Il est possible de positionner des éléments sur la même ligne (à gauche, au centre, à droite par exemple) sans avoir forcément recours à un tableau de mise en page.

Notez cependant que selon les cas de figures, ces techniques d'alignement sont plus complexes et moins accessibles que des tableaux bien conçus.

Dans tous les cas, nous employerons le positionnement flottant qui, lorsqu'il est bien maîtrisé, nous fera parvenir à nos fins.

1- Positionner un élément tout à droite et un autre tout à gauche sur la même ligne

L'élément flottant devant être situé en premier dans la partie HTML, l'une des solutions les plus simples est celle-ci :


HTML
<p><span>partie à gauche</span>partie à droite</p>

CSS
p {
text-align: right;
}
p span {
float: left;
}

Dans le cas de lignes multiples, il convient d'utilier la règle "clear: both" pour éviter les chevauchements de flottants :


HTML
<p><span>partie à gauche</span>partie à droite</p>
<p><span>partie à gauche</span>partie à droite</p>
<p><span>partie à gauche</span>partie à droite</p>

CSS
p {
text-align: right;
clear: both;
}
p span {
float: left;
}

2- Positionner trois éléments : à gauche, au centre et à droite

Là aussi, il s'agira d'employer judicieusement la propriété "float" et ses spécificités : il faudra également placer les éléments flottants en premier au sein du conteneur :


HTML
<p><span class="gauche">partie à gauche</span><span class="droite">partie à droite</span>partie au centre</p>

CSS
p {
text-align: center;
}
p span.gauche {
float: left;
}
p span.droite {
float: right;
}

 
  Aujourd'hui sont déjà 5 visiteurs (236 hits) Ici! ;  
 
Ce site web a été créé gratuitement avec Ma-page.fr. Tu veux aussi ton propre site web ?
S'inscrire gratuitement