Mettre du texte à gauche et à droite sur la même ligne

Par exemple dans un footer, vous pouvez vouloir mettre votre copyright sur la gauche de la ligne, et vos liens de contacts sur la partie droite. L'astuce est très simple, un peu d'alignement avec CSS suffit!

Sur certains sites, les webmasters arrivent en pied de page (footer) à intégrer leur copyright ainsi que leur adresse e-mail sur une même ligne ! Approchez, ce n'est pas fort compliqué...

Pour effectuer cette action, nous allons devoir toucher à votre source html ainsi qu'à votre feuille de style (CSS). Tout d'abord, voici le code que l'on va utiliser. Nous allons l'expliquer par la suite.

Code HTML

<p><span class="gauche">Texte aligné à gauche</span><span class="droite">Texte aligné à droite</span></p>

Code CSS

p {

  text-align: justify;

}

p span.gauche {

  float: left;

}

p span.droite {

  float: right;

}

Décortiquons maintenant ce petit bout de code !

Dans notre partie HTML, nous avons la balise <p> ..</p> afin d'ouvrir un paragraphe, la partie CSS étant liée à ce paragraphe est donc une simple justification de texte.
Cependant, grâce aux balises <span>, nous avons fabriqué notre propre classe afin d'aligner nos différents textes ! Nous pouvons donc positionner à différentes positions les éléments d'un même paragraphe.

La partie droite fonctionne exactement de la même manière

N'hésitez pas à m'envoyer vos bouts de code en commentaire, je vous aiderai à les corriger et/ou vous expliquer

Par Moyan , Le 08 Janvier 2010 à 09h19
Ce tutoriel est la propriété d'Aidoweb et ne peut en aucun cas être copié.

Retour à HTML/CSS

Commentaires sur cet article

Merci pour cette bonne explication !

Jonat, ton script fonctionne très bien.

Bonjour !
Je n'arrive pas à mettre un lien. Avec uniquement du texte ça fonctionne, mais pas avec un lien. A l'aide
<style>
p {
text-align: justify;
}
p span.gauche {
float: left;
}
p span.droite {
float: right;
}
</style>
<p><span class="gauche">Bla bla</span><span class="droite"><A class="lien" href="mentions_legales.html" target=accueil_milieu>Mentions légales</A></span></p>

Merci d'avance !