Le contenu du flottant qui depasse !

Résolu/Fermé

J@rodd Messages postés 39 Date d'inscription mercredi 5 octobre 2011 Statut Membre Dernière intervention 26 octobre 2015 - 15 févr. 2015 à 16:28
J@rodd Messages postés 39 Date d'inscription mercredi 5 octobre 2011 Statut Membre Dernière intervention 26 octobre 2015 - 17 févr. 2015 à 18:22

Bonjour,

J'ai un petit soucis de positionnement en css, mon div conteneur est bien placé, mes flottants tres bien aussi mais leurs contenu <p> depasse du cadre.
Mon conteneur possede le overflow:hidden; donc il le cache bien mais moi je veuw qu'il passe à la ligne sans que j'ai à le faire.
code quelque chose dans le genre :


<style >
#contents{
width:999px;overflow:hidden;
}
.float-left{float:left;width:78%;}
.float-right{float:right;width:30%;}
.clear{clear:both;height:0;}
</style>

<div id="contents>
 <div class="float-left"></div>
<div class="float-right"></div>
<div class="clear"></div>
</div>

Le soucis est que dés qu'il y a du plein texte trop long, il continue d'ecrire sans prendre en compte la largeur de son conteneur : le float-left;

Soluce ? Merci d'avance.

A voir également:

Le contenu du flottant qui depasse !
Word a trouvé du contenu illisible - Guide
Le fichier à télécharger correspond au contenu brut d’un courrier électronique. de quel pays a été envoyé ce message ? - Guide
Contenu mms ✓ - Forum Vos droits sur internet
Désolé, vous avez dépassé votre quota d'éléments partagés. ✓ - Forum Cloud
[<B>contenu masqué</b>] ✓ - Forum Téléphones & tablettes Android

1 réponse

Réponse 1 / 1

jm-25 Messages postés 139 Date d'inscription samedi 17 janvier 2015 Statut Membre Dernière intervention 30 mars 2015 121
Modifié par jm-25 le 15/02/2015 à 20:54

tu as oublié de fermer le guillemet ici:

<div id="contents>

Et 78% + 30% ça fait pas 100% :-) met ton float-left à 70% si tu veux que ce soit cohérent. C'est pour cela que ça dépasse de 8%.

J@rodd Messages postés 39 Date d'inscription mercredi 5 octobre 2011 Statut Membre Dernière intervention 26 octobre 2015
15 févr. 2015 à 22:06

Merci pour ta réponse.

Le code que j'ai mis est juste pour illustrer mon exemple mais merci de l'avoir corrige. Et je sais tres bien que 78+30 ne font pas 100 (j'aurais du mettre 20 au lieu de 30 mais bon) Les 2% restant c'est pour avoir un espace entre les deux float donc qu'ils soient pas collé l'un contre l'autre.

Mais meme en faisant en sorte que ca fasse 100 le contenu du float depasse toujours.

jm-25 Messages postés 139 Date d'inscription samedi 17 janvier 2015 Statut Membre Dernière intervention 30 mars 2015 121
15 févr. 2015 à 22:46

""" Et je sais très bien que 78+30 ne font pas 100 (j'aurais du mettre 20 au lieu de 30 mais bon) Les 2% restant c'est pour avoir un espace entre les deux float donc qu'ils soient pas collé l'un contre l'autre. """

Alors pourquoi tu me donnes ce code si tu le sais ? Ton flottant ne dépassera pas si tu mets des valeurs cohérentes comme j'ai dit plus haut. Si tu parles d'un autre code, alors il y a sûrement une erreur dans ton autre code, montre moi le. Sur ce code avec des valeurs cohérentes, il ne peut pas dépasser.

J@rodd Messages postés 39 Date d'inscription mercredi 5 octobre 2011 Statut Membre Dernière intervention 26 octobre 2015
16 févr. 2015 à 17:27

Le code c'est le meme que j'ai et comme dis en haut meme en ayant des valeurs coherente :


<style >
#contents{width:800px;border:thin solid black;}
.bt1{float:left;width:70%;background-color:red;}
.bt2{float:right;width:30%;background-color:blue;}
.clear{clear:both;}
</style>
<body>

<div id="contents">
    
		<div class="bt1">
			1234567890101112131415161718192021222324252627282930313233343536373839404142434445464748495051552535455565758596061626364656667686970
		</div>
		<div class="bt2">
			fkndkfkdf
		</div>
		<div class="clear"></div>
    
</div>

leurs contenue depasse, genre si je rajoute un paragraphe sans faire un saut à la ligne il continu et rajoute meme une scroll bar.

Valeurs cohérente meme probleme donc je vois pas d'ou sa viens.

jm-25 Messages postés 139 Date d'inscription samedi 17 janvier 2015 Statut Membre Dernière intervention 30 mars 2015 121
Modifié par jm-25 le 16/02/2015 à 19:27

ok, je comprend mieux. C'est parce que dans la suite de chiffres il n'y a pas d'espace. Si tu mets seulement un ou deux espaces au milieu de ta chaine de chiffre ça rentre dans l'ordre. Sers toi des lorem ipsum pour remplir tes box plutôt. Ou tape quelque chose en mettant des espaces comme pour un texte normal en le plaçant entre les balises P.

J@rodd Messages postés 39 Date d'inscription mercredi 5 octobre 2011 Statut Membre Dernière intervention 26 octobre 2015
16 févr. 2015 à 21:14

Oh mince.J'y avais pas pensé du tout mais alors pas du tout :D .
Merci comme quoi des bases solide servent.

PS : s'il j'ai un code (ex:binaire long^^) qui contient pas d'espace, y a t-il un moyen de faire en sorte que il passe a la ligne a un certain moment ?

Discussions similaires

Savoir de quel ville à été envoyé le message

[Firefox] Délai d'attente dépassé !

Youtube: Ce contenu n'est pasdisponible dans votre pays

Message recurent : Un site est en train de lire vos données

ca veut dire quoi wmg sur youtube ?

Discussions similaires

Newsletters