Forcer le retour à la ligne dans un div flottant

Bonjour,

J'ai un div en contenant deux

<div class="bloc">
<div class="my_picture"><une image /></div
<div class="my_text">texte texte texte texte ...</div>
<div class="clr"></div>
</div>

my_picture : float left et en largeur fixe
my_text : float left et largeur variable
clr : clear both

my_texte contient UNE ligne de texte, longue...

Le div my_text passe au-dessous du div my_picture si l'espace disponible à droite de l'image n'est plus suffisant pour afficher le texte sur UNE SEULE ligne.

Existe-il une astuce pour forcer les retours à la ligne dans le div my_text tant que, par exemple, la largeur de ce div est supérieure à 400px ?
Au dessous de cette taille, il viendrait évidemment se positionner sous le div my_picture

Ca fonctionne avec IE (on peut indiquer un min-width pour le div my_text), mais pas avec FF

J'ai regardé du côté de withe-space mais c'est pas ça du tout.

Merci
cb
Modifié par cbcb (18 Oct 2011 - 22:13)

clear: both

Merci, mais c'est déjà fait.
Et je ne comprends pas en quoi cela aurait résolu le problème...

a écrit :
withe-space

ça peut pas être ça

white-space:nowrap;

Regarde ce lien
Modifié par jmlapam (18 Oct 2011 - 22:33)

jmlapam a écrit :
withe-space

ça peut pas être ça

white-space:nowrap;

Justement, la valeur nowrap force le texte à tenir sur une seule ligne, ce qui n'est pas l'effet souhaité.

bah oui mais il a écrit

a écrit :
withe-space

je soulignais la coquille.
Modifié par jmlapam (18 Oct 2011 - 23:50)

J'avais pas bien lu ta demandes...
Le clear both permet de mettre tout sous l'image, non à sa droite...

<div>
<img style float left />
<p></p>
</div>

Et ça fonctionne...
Modifié par Ehplod (19 Oct 2011 - 08:21)

Hello,

L'erreur est de faire flotter le bloc de texte alors que ce n'est pas nécessaire d'une part, et d'autre part la gestion de la largeur dans les flottants va à l'encontre du rendu souhaité.

Mieux vaut faire flotter l'image uniquement, et donner une marge à gauche à ton bloc de texte (de la largeur de l'élément flottant + la gouttière souhaitée) pour que le texte ne repasse pas sous l'image flottante s'il est long.