Discussion :

[djef80_12]

Bonjour,

J'ai un problème sur la page suivante http://ec.europa.eu/ellada/news/index_el.htm

Vous pourrez remarquer que les deux images débordent de la div.
Pour info, la class "newsImage" fait juste un float:left; .

J'essaye de jouer avec les propriétés "position" et "display" mais je n'arrive pas à un résultat correcte...

Auriez-vous une idée différente que de tout mettre dans un tableau (ça fonctionne, j'ai testé, mais je suis sûr qu'il y a moyen de le faire avec des <div>)

Merci

[MasterOfChakhaL]

Salut et bienvenue à toi sur les forums de developpez.com

Si dans ta div (qui contient l'image en float:left) tu rajoutes ceci à la fin:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<div style="clear:both;"></div>

Ca devrait régler le problème. C'est pas super super de rajouter des éléments juste pour fixer ce genre de détail mais bon, ca marche.

L'élément qui porte clear:both n'accepte pas de se retrouver à côté d'un élément flottant, par conséquent, il passe en dessous.
Cet élément restant dans le flux de ta page, le conteneur sera agrandi d'autant.

[djef80_12]

Merci pour cette réponse rapide.

Ta solution corrige une partie du problème, les images ne débordent plus sur la <div> suivante.
Par contre, les images débordent toujours de leur propre <div>, cela se remarque très clairement quand le background n'est pas blanc.

[djef80_12]

Up.
http://ec.europa.eu/ellada/news/index_el.htm
Les images dépassent de la <div> qui les contient.
Si quelqu'un a une idée, elle est la bienvenue

[Strix]

Salut.

Essaye de rajouter un max-height pour tes divs qui contiennent tes images ("newsImage" je crois).

Je suis pas sûr mais ça peut marcher.

[djef80_12]

Je ne pense pas que la propriété max-height soit gérée par tous les browsers.
En plus de cela, cette liste de short news est générée de manière automatique en xsl ce qui veut dire que l'on ne sait pas à l'avance la taille de l'image et aussi que les classes css sont les mêmes et définies de la même manière pour chacune de ces short news.

[Strix]

bon ben je sais pas alors... sorry