[Résolu] Retour à la ligne après un float.

Bonjour,

Voici la page qui me pose problème. Je veux afficher des photos les unes à côté des autres mais je ne sais pas à l'avance combien il y en aura et je ne veux pas utiliser un tableau. J'ai donc utilisé des float="left". Mais ensuite j'ai du texte que je souhaiterais faire passer à la ligne et je n'y parviens pas. J'ai essayé clear="both" mais ça ne change rien. Pouvez -vous m'aider?

Merci
Modifié par Tryne157 (18 Sep 2007 - 21:45)

Peux-tu nous donner le code CSS et HTML de la page

seby2027 a écrit :
Peux-tu nous donner le code CSS et HTML de la page

Tu cliques sur le lien, et tu arrives sur la page, où tu peux alors consulter le code HTML et CSS.

Tryne157 a écrit :
J'ai donc utilisé des float="left"

En conséquence de quoi, ceux-ci dépassent de leur conteneur. Tu as donc un bloc div portant la classe "texte" qui fait 100% de la largeur de son conteneur, mais qui a une hauteur nulle car tous ses éléments enfants sont flottants et donc dépassent. Mais si tu évite ce dépassement des flottants, tu n'as plus de problème, vu que div.texte viendra repousser les éléments suivants (les h3 et la suite).

Un peu de lecture:
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html

Je te conseille la solution suivante:

div.texte {
	overflow: hidden;
	width: 100%;
}

Modifié par Florent V. (18 Sep 2007 - 10:45)

Merci beaucoup pour ce lien que je vais vite mettre dans mes marques-page, j'ai appris beaucoup de choses très utiles sur le positionnement. J'essaye ça le plus vite possible et je vous tiens au courant.

J'ai le meme souci sauf que moi c'est pour afficher des choses en dessous des éléments mis en float:left.
Par exemple sur cette page.
J'ai rajouté du texte en dessous de chaque photo ( photo + texte dans un span avec float:left ) mais le hic est que mon lien de retour se retrouve maintenant au dessus des photos et non au dessous. C'est normal mais comment faire pour qu'il reprenne sa place?
Modifié par Zenerox (18 Sep 2007 - 17:44)

Après avoir lu toutes les solutions exposées dans le lien de Florent V., j'ai décidé d'utiliser clear: both.En fait je l'utilisais mal

Il fallait mettre le style clear:both sur le titre "Répondre à cet article".

D'après ce que j'ai compris, ça marchera sur tous les navigateurs sauf IE pour Mac (je n'ai pas encore testé sous Mac).

Encore merci pour votre aide.
Modifié par Tryne157 (19 Sep 2007 - 09:43)