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

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 : 1 commentaire Donner une note à l'article (4)

Article lu   fois.

Les deux auteurs

Site personnel

Profil Pro

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
Sélectionnez

<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
Sélectionnez

.flotte {
  float:left;
}       
            

Résultat attendu :

Image non disponible

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
Sélectionnez

<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 :

Image non disponible

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.

 
Sélectionnez

.flotte {
  float:right;
}
            

Résultat attendu :

Image non disponible

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.

Liste de mes articles :
Principe des feuilles de style CSS - Commentez Donner une note à l'article (5)
Balises (X)HTML de base - 1 commentaire Donner une note à l'article (4.5)
Feuille de style CSS de base - Commentez Donner une note à l'article (3.5)
Mettre en forme un texte en CSS - Commentez Donner une note à l'article (4)
Gérer les marges en CSS - 5 commentaires Donner une note à l'article (4.5)
Résoudre les problèmes de marges en CSS - Commentez Donner une note à l'article (4)
Sélecteurs class et id - 3 commentaires Donner une note à l'article (5)
Mise en page full CSS - 4 commentaires Donner une note à l'article (4.5)
Bordures en CSS - 2 commentaires Donner une note à l'article (4.5)
Image de fond en CSS - 3 commentaires Donner une note à l'article (4.5)
Effets Rollover à l'aide de :hover - 2 commentaires Donner une note à l'article (4.5)
Aligner une image et du texte à l'aide de la propriété float - 1 commentaire Donner une note à l'article (4)
Listes à puces en image - 2 commentaires Donner une note à l'article (5)
Citations et retraits - Commentez Donner une note à l'article (4.5)
Concevez des boutons graphiques avec du CSS - 11 commentaires Donner une note à l'article (4.5)
Positionnez des images aux quatre coins d'une page web - 16 commentaires Donner une note à l'article (5)
Appliquez un effet de zoom sur une image avec les CSS - 1 commentaire Donner une note à l'article (4.5)
Zoomer une image façon thumbnail en CSS - 3 commentaires Donner une note à l'article (4.5)
Tableaux à bordures fines avec les CSS - 1 commentaire Donner une note à l'article (5)
  

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.