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 situations, ces techniques d'alignement sont plus complexes et moins accessibles que des tableaux bien conçus.
Voici des techniques utilisant le positionnement flottant.
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 :
<p><span>partie à gauche</span>partie à droite</p>
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 :
<p><span>partie à gauche</span>partie à droite</p>
<p><span>partie à gauche</span>partie à droite</p>
<p><span>partie à gauche</span>partie à droite</p>
p {
text-align: right;
clear: both;
}
p span {
float: left;
}
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 :
<p><span class="gauche">partie à gauche</span><span class="droite">partie à droite</span>partie au centre</p>p {
text-align: center;
}
p span.gauche {
float: left;
}
p span.droite {
float: right;
}