28172 sujets

CSS et mise en forme, CSS3

[Résolu] Problème de retour à la ligne du texte avec une div float:

Bonjour tout le monde,

Voilà ça fait deux jours que je cherche, pourtant ça peut paraître simple :
j'ai deux div que je veux aligner : une image à gauche et le texte qui l'accompagne à droite

le html :

<div class="container">
	<div id="image"></div>
	<div id="texte"></div>
</div>

le CSS :

.container {
}
#image {
	float: left;
}
#texte {
        float: left;
}

Les div sont remplies via JavaScript. Tout marche bien, sauf que sur certains navigateurs, le texte contenu dans la div texte refuse d'aller à la ligne. Donc au lieu de faire un "retour chariot" lorsqu'il n'a plus assez de place horizontalement dans la div, il continue sur une seule ligne, puis à cause de l'overflow, toute la div texte passe en dessous de l'image.
Je sais que le problème vient de la propriété float:left, parce que j'ai testé sans l'utiliser et la le retour à la ligne se fait bien dans tous les navigateurs.
J'ai essayé divers trucs comme white-space: normal, mais ça n'a aucun effet.
J'ai aussi essayé de remplacer la div par un paragraphe avec un margin: 0, mais ça ne fonctionne que sur certains navigateurs.
J'ai remplacé la div par un span, et là ça fonctionne, mais le problème c'est qu'il m'est alors impossible, par exemple d'aligner le texte à gauche, près de l'image, avec le span on ne peut rien faire.
J'ai essayé inline-block, même problème qu'avec float: left ...
Bref je suis à court d'idées, alors toute aide sera la bienvenue.
Administrateur
JENCAL a écrit :
Pourquoi ne pas utilisé Boostrap ?

exemple ici

Bootstrap pour faire deux float, c'est un peu la grosse artillerie, non ? Smiley cligne

Thomas237 : Tu peux proposer un exemple en ligne visible ? (codepen, jsfiddle)
Modifié par Raphael (07 Mar 2016 - 16:42)
Raphael a écrit :

Bootstrap pour faire deux float, c'est un peu la grosse artillerie, non ? Smiley cligne

haha oui tu as raison, c'est un peu brute, mais c'est surtout si il veut gérer cela plus de deux fois
Merci pour vos réponses, vraiment bien ce forum.

@Yordi : oui display table parait être une solution intéressante, je la met de côté, mais par contre je sais que ça ne marchera pas, par exemple sur ie8.

@gcyrillus : flex est moins bien supporté que display table je pense, donc à voir dans quelques années Smiley cligne

@Raphael : ok, au passage je découvre jsfiddle. Voici le lien de l'exemple le plus basique qui soit :

https://jsfiddle.net/#&togetherjs=2n8UgLdbH0

Dans l'exemple texte = "texte texte texte" ... sur mon écran avec 3 "texte", tout le texte passe en dessous de l'image, si j'en enlève un, il y a assez de place et le texte reste à droite de l'image. Je cherche à obtenir que quand il n'y a plus assez de place pour la ligne de texte, le saut de ligne se fasse normalement :
texte texte
texte <== saut de ligne
Je marque ce sujet comme résolu. le display:table m'a permis d'aligner les div, tout en n'empêchant pas le saut de ligne du texte. Au niveau compatibilité c'est très acceptable.
Merci pour l'aide !
Modifié par Thomas237 (07 Mar 2016 - 23:33)
Sujet clos
Aller à