CSS Div & Float - Page 1

Voilà, j'ai besoin de faire une page dont un "bloc" contienne du texte mais que ce bloc fasse la largeur du texte. J'ai donc utilisé un DIV (le problème est le même si j'utilise un SPAN à la place) avec dans la CSS "float:left;" mais je voudrais que sur sa "ligne", mon div soit seul.

En effet j'ai ça dans le HTML
Texte Avant<div class="test">TEST</div>Texte après
Et ça dans le CSS

.test{
	border-style:double;
	float:left;
	clear:both;
}

Et ça donne ça :

Texte AvantTexte après
######
#TEST#
######

Alors que je cherche à avoir

Texte Avant
######
#TEST#
######
Texte après

Mais ne connaissant pas la taille de "TEST" à l'avance, je ne peux pas fixer la propriété width. Le seul "hack" que j'aie trouvé consiste à utiliser une table et donc remplacer le html par
Texte Avant<table class="test"><tr><td>TEST</td></tr></table>Texte après

Le plus pète burnes dans l'histoire, c'est que ça parait "super simple" comme concept, un div pas forcément float mais dont la largeur est adaptée au contenu...

Grand Merci à Copper, qui m'a suggéré la solution sur IRC :

<div class="prout">Texte Avant</div><div class="prout"><span class="test">TEST</span></div><div class="prout">Texte après</div>

.test{ 
	border-style:double; 
	float:left; 
	clear:both; 
}
.prout{
	width:100%;
}

C'est (selon moi) une bidouille, mais elle est moins sale que le <table> pour le coup. Quoi qu'il en soit, si vous avez mieux àproposer...

PS : ça merdouille sous FF

Pourquoi pas des p au lieu des div ?

heu... parce que ça ne marche pas mieux.

Naturellement, j'aurais fait:
<div>Texte Avant</div> <div class="test">TEST</div> <div class="test_2">Texte après</div>

et
.test{ border-style:double; float:left; clear:both; } .test_2 { clear:both; }

Ça fonctionne sur IE / Chrome / Opera mais j'ai pas FF pour tester. Après je ne sais pas si tu trouves cela plus propre ^^

Je ne comprends pas trop ce qui permet que ça fonctionne comme ça comparé aux exemples précédents mais en tous les cas, merci !

Ça vient très probablement du float.

Pour placer quelque chose en dessous d'un élément avec float, il faut attribuer à ce quelque chose le clear:both pour "remettre les positions à zéro". Je me suis souvent pris la tête sur ce genre de choses.