28220 sujets

CSS et mise en forme, CSS3

Astuce pour éviter les spacer avec les float

Bonjour à tous

On utilise souvent la propriété float pour aligner des éléments, l'un à gauche et l'autre à droite par exemple, sur une même ligne et dans un conteneur.
Afin que les éléments "restent" dans le conteneur, et donc que celui-ci s'adapte à la hauteur de son contenu, on doit utiliser une balise <br /> avec la propriété clear: both;, ce qu'on appelle un spacer.

Pour ceux qui ne voient pas de quoi je veux parler, il y a un exemple de cette méthode sur pompage.net/pompe/csspratique/.

J'ai trouvé une astuce toute simple pour éviter d'utiliser un spacer :
il suffit d'appliquer la propriété float: left au conteneur.
Cette méthode marche avec Firefox, IE6, et Opéra (je n'ai pas testé avec d'autres navigateurs)

Vous pouvez voir un exemple d'utilisation en cliquant sur un album. (fil d'ariane et nombre de photos)

Ou testez vous-même avec cette exemple :
code HTML

<div id="conteneur">
  <p id="gauche">à gauche</p>
  <p id="droite">à droite</p>
</div>

code CSS

#conteneur {
  float: left;
  padding: 1em;
  background: #CCC;
  border: 1px solid #000;
}
#gauche {
  float: left;
}
#droite {
  float: right;
}

Modifié par Swell (17 Jun 2015 - 12:18)
Administrateur
Swell a écrit :
J'ai trouvé une astuce toute simple pour éviter d'utiliser un spacer :
il suffit d'appliquer la propriété float: left au conteneur.

Oui ça marche mais c'est souvent bien plus contraignant au final car :
- le conteneur ne peut plus adopter automatiquement toute la largeur (un élément flottant a une largeur définie)
- le conteneur n'est plus dans le flux.
Raphael a écrit :
- le conteneur ne peut plus adopter automatiquement toute la largeur (un élément flottant a une largeur définie)

Si on place dans le conteneur au moins un élement en float: right, alors il adoptera toute la largeur. (Si le conteneur est positionné en float: right, alors il faut au moins un élément en float: left)

Raphael a écrit :
- le conteneur n'est plus dans le flux.

c'est vrai que cela peut poser des problèmes dans certains cas, mais ça ne pose pas de problèmes quand le conteneur s'étend sur toute la largeur disponible
Sujet clos
Aller à