H1 et flaot left

Bonjour,

Y a t-il une solution pour faire un float:left sur une balise H1, mais d'empêcher tout ce qui suit de remonter juste derrière ce H1 ?

En fait, c'est parce que je voudrait une couleur sur mon H1, mais qui ne prenne pas toute la largeur du block parent. (C'est le cas par défaut avec cette balise)

Merci de vos réponses

Salut,

il suffit de lui affecter une largeur (width).

Je m'auto répond :

display : table;

Ce qui amène une deuxième question. Es ce une bonne méthode pour faire ce que je cherche à faire ?

@Heyoan,
une largeur width ne fait l'affaire. J'avais essayé avec width:100% et float left.
Le problème, c'est que j'en ai besoin pour ramener la couleur seulement sous le texte du H1 pour ne plus avoir une bande coloré, mais un petit bloc coloré en haut à gauche.

Je n'avais pas vu ton post lorsque je me suis autorépondu, mais j'ai trouvé que ça fonctionne avec display:table;.

Je ne sais cependant pas si c'est très catolique de faire comme ça

Vu ton second post je t'invite à lire : Comprendre la structure HTML et le rendu CSS des balises : bloc et en-ligne.

mikouRoux a écrit :
une largeur width ne fait l'affaire. J'avais essayé avec width:100% et float left.
Le problème, c'est que j'en ai besoin pour ramener la couleur seulement sous le texte du H1 pour ne plus avoir une bande coloré, mais un petit bloc coloré en haut à gauche.

Du coup je ne comprends pas bien ce que tu veux faire. Tu pourrais nous montrer ton code ?

En fait, je veux faire un truc dans ce style :

Ce que je voulais :

MON TITRE H1 COLORE |
-----------------------
Mon contenu

Ce qui posait problème avec un "float:left" sur H1 :

MON TITRE H1 COLORE | Mon contenu
-----------------------

Mais en enlevant float:left et en remplaçant par display:table, ça donne ce que je voulais.
Donc ma question est résolue. Mais est ce que c'est bien d'employer display:table dans ce cas ou est ce qu'il y a une meilleur solution ?

Ben pourquoi pas effectivement. Par contre il ne sera pas interprété avec IE <8. Si l'élément suivant le H1 est de type bloc tu aurais aussi pu faire display:inline et avec le float:left il aurait fallut rajouter clera:left à l'élément suivant.