28172 sujets

CSS et mise en forme, CSS3

Problème de retour à la ligne avec nowrap

Bonjour à tous,

J'ai un petit problème que je n'arrive pas à résoudre même après avoir fait chauffé google pendant plusieurs heures:
J'ai un bloque de largeur fixe que je souhaite aligner à droite.
Un autre qui se place à gauche et qui doit être sur une seule ligne.

Le problème est que lors du redimensionnement de la fenêtre, dans ie tout se passe comme je l'espérais, c'est à dire que quand la fenêtre est trop petite, le bloque de gauche va à la ligne. Mais dans ff, le bloque de gauche déborde sur mon texte de droite sans aller à la ligne.

Voilà mon code (extrêmement simplifié):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
        <title>Raid X-Areva: Accueil</title>
	<style>
	.gauche {
	white-space: nowrap;
}
.droite {
	float:right;
}
	</style>
</head>
<body>
<div class="droite">à droite</div>
<div class="gauche">à gauche à gauche à gauche à gauche</div>
</body>
</html>

Aidez moi svp, je n'arrive pas à m'en sortir!
Je suis tenté de dire que le comportement de Firefox est normal, en ce sens que la valeur nowrap a pour effet de supprimer tout saut de ligne au fil du texte. Par conséquent, soit tu supprimes white-space: nowrap soit tu t'arranges pour que le texte contenu dans ton div de classe gauche ne soit pas trop long.

Une autre solution consiste à ajouter un clear: right à ton div .gauche ; mais, ce dernier se trouvera alors toujours positionné après le div .droite, quelles que soient les dimensions de la fenêtre.
Modifié par Victor BRITO (18 Oct 2009 - 14:58)
Bonjour sousoulebarbu,

Remplace 
.gauche { white-space: nowrap; }
par 
.gauche { white-space: normal; }
et dit moi ce que tu en penses Smiley cligne .
>Victor BRITO
Je sais que le comportement de ff est normal, mais je cherche justement une solution pour faire ce que je cherche.
Donc pour toi il n'y a pas de solution?
>jQz
Je pense que tu n'as pas vraiment compris ce que je tente de faire:
Je voudrais que quand la fenêtre est trop petite pour que les deux blocs soient à coté, tout le bloque de gauche se place à la ligne (sous "à droite"), mais que tout le texte de gauche soit sur une seule ligne.
Tu comprend pourquoi ta solution ne me convient pas?

En tout cas, merci pour vos réponses rapides.

Personne d'autre n'aurait une solution?
Sujet clos
Aller à