Aligner une image et du texte à l'aide de la propriété float

| Pascale Lambert | Kerod |

Pour positionner une image à droite ou à gauche d'un texte, on peut bien sûr utiliser une mise en forme par tableau... Mais un tableau n'est pas fait, normalement, pour faire de la mise en page.

A l'aide du langage CSS, aligner une image et du texte est très simple grâce à la propriété CSS float qui fait "flotter" les éléments.

N'hésitez pas à nous faire part de votre avis sur cet article : Commentez

- Titre : Aligner une image et du texte à l'aide de la propriété float

- Auteurs : Pascale Lambert, Kerod

- Parution : 9 juillet 2010

- Mise à jour : 24 novembre 2010

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 09/07/2010 Pascale Lambert. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- Avertissements préliminaires

- Aligner une image à gauche du texte

- Aligner une image à droite du texte

- Complément

Avertissements préliminaires

- Tout élément flottant doit être déclaré en premier dans le flux, c'est-à-dire dans la lecture de haut en bas du code HTML ;

- Les images déclarées dans le code HTML, qui n'ont pas donc vocation à être des images de fond, doivent contenir l'attribut alt. Cet attribut est le texte alternatif qui doit apparaître si l'image n'est pas visualisée. Il a donc un rôle important pour l'accessibilité, et pas pour le référencement !
* Si l'image est purement décorative, le contenu du alt doit être vide ;
* Si l'image est porteuse d'information, le contenu du alt doit être pertinent et reprendre cette information.

Aligner une image à gauche du texte

Code XHTML

<p class="flotte">
<img src="images/new.png" alt="Nouveau !" />
</p>
<p>
Toutes les nouveautés, rien que des nouveautés.
</p>

Bien sûr, ce code tout seul positionne l'image au dessus du texte, et puis c'est tout...Mais en indiquant un float:left dans la classe flotte déclarée dans le paragraphe contenant l'image, celle-ci va dégager un espace libre sur sa droite (puisqu'elle flotte à gauche) où le texte pourra se placer.

Remarque : si vous n'avez pas de notions sur les classes CSS, mieux vaut lire ce tutoriel avant de continuer.

Code CSS

.flotte {
float:left;
}

Résultat attendu :

Voir le résultat.

Et là vous allez me dire : "C'est bien joli votre truc, mais le texte il est tout en haut de l'image, ça ne le fait pas."

Nan, mais bien sûr... Si le texte occupe un espace moins haut que la hauteur de l'image (ici 65 pixels) l'alignement peut paraître mal fait. Cela peut se régler de différentes façons.

Si le texte est très court, on peut appliquer une hauteur de ligne égale à la hauteur de l'image, par exemple, à l'aide de line-height. Le texte sera ainsi naturellement aligné au milieu de cette hauteur (attention, ceci ne sera donc pas valable si vous avez plusieurs lignes car elles vont être toutes espacées de la hauteur de ligne déclarée. Mais cela ne sera pas forcément nécessaire non plus...).

Code (X)HTML

<p class="flotte">
<img src="images/new.png" alt="Nouveau !" />
</p>
<p style="line-height:65px;">
Toutes les nouveautés, rien que des nouveautés.
</p>

Résultat attendu :

Voir le résultat.

Aligner une image à droite du texte

Pour aligner son image cette fois à droite, on ne change rien au code HTML. C'est juste dans la feuille de style qu'il faut déclarer un float:right à la place du float:left.

.flotte {
float:right;
}

Résultat attendu :

Voir le résultat.

Bien entendu, si vous désirez bénéficier des deux options, il faudra deux noms de classes différents et appliquer celle qui ira bien selon vos désirs.

Complément

Le flottement de l'image persiste tant que le texte n'a pas dépassé la hauteur de l'image. Pour annuler cet effet, il faut indiquer un clear:both au premier élément que l'on veut voir dépasser ce phénomène. Cet élément passera donc à la ligne, sous l'image, quelque soit la hauteur de celle-ci.