[Résolu] Un clear:left qui clear trop !

Bonjour à tous !

Tout d'abord voici le code de ma page simplifiée, pour visualiser ce que je vais dire :

<div style="float: left; width: 10em; border: 1px solid pink;">
<h2>Menu gauche</h2>
<h2>Menu gauche</h2>
<h2>Menu gauche</h2>
<h2>Menu gauche</h2>
<h2>Menu gauche</h2>
<h2>Menu gauche</h2>
<h2>Menu gauche</h2>
<h2>Menu gauche</h2>
<h2>Menu gauche</h2>
<h2>Menu gauche</h2>
<h2>Menu gauche</h2>
</div>

<div style="margin-left: 11em; border: 1px solid blue;">
<h2>Zone du centre</h2>

<img src="1.jpg" style="float: left; margin: 5px;" />
<img src="1.jpg" style="float: left; margin: 5px;" />
<img src="1.jpg" style="float: left; margin: 5px;" />
<img src="1.jpg" style="float: left; margin: 5px;" />
<img src="1.jpg" style="float: left; margin: 5px;" />
<img src="1.jpg" style="float: left; margin: 5px;" />
<img src="1.jpg" style="float: left; margin: 5px;" />
<img src="1.jpg" style="float: left; margin: 5px;" />
<img src="1.jpg" style="float: left; margin: 5px;" />
<img src="1.jpg" style="float: left; margin: 5px;" />
<img src="1.jpg" style="float: left; margin: 5px;" />
<img src="1.jpg" style="float: left; margin: 5px;" />
<img src="1.jpg" style="float: left; margin: 5px;" />
<img src="1.jpg" style="float: left; margin: 5px;" />
<img src="1.jpg" style="float: left; margin: 5px;" />
<img src="1.jpg" style="float: left; margin: 5px;" />
<img src="1.jpg" style="float: left; margin: 5px;" />
<img src="1.jpg" style="float: left; margin: 5px;" />
<img src="1.jpg" style="float: left; margin: 5px;" />

<div style="clear: left;">Suite du texte, je veux que ce texte soit __juste__ en dessous de mes images, et _non_ en dessous du menu gauche</div>
</div>

Alors ce que je cherche à faire, c'est une liste d'image en float: left (pour qu'elles aillent à la ligne joliement), et en dessous du texte.

J'ai donc mis un clear: left au texte pour qu'il se place en dessous des images. Le problème : le texte est en dessous des images, mais aussi en dessous du menu gauche !!

Ce que je cherche à faire, c'est en fait un clear:left sur un seul niveau. C'est à dire qu'il annulerait le float des images, mais pas celui du menu gauche.

J'ai trouvé une solution alternative en mettant mes images dans un block de hauteur fixe, et ainsi pouvoir supprimer le clear: left du texte qui suit. Le problème est que je ne connais pas à l'avance la hauteur du div contenant mes images ! Elle dépend du nombre d'image, et de la résolution du visiteur.

Je suis donc un peu dans l'impasse

Une idée ? Une astuce ?

Merci beaucoup !
Modifié par winzou (09 Aug 2007 - 12:08)

Bonjour,

winzou a écrit :
Le problème : le texte est en dessous des images, mais aussi en dessous du menu gauche !!

Voir l'article suivant pour l'explication et les solutions:
Float, clear et contextes de formatage.

Sinon, tu peux aussi te passer du clear en utilisant un contexte de formatage pour éviter le dépassement des flottants. C'est à dire que tu mets les flottants dans un bloc (par exemple une div), mais au lieu de lui donner une hauteur fixe tu déclares un overflow: hidden. Les flottants ne dépasseront alors plus de la div en question... sauf dans IE6 (ok pour IE7), notre papy du Web, qui aura besoin d'un peu de HasLayout pour émuler le contexte de formatage. Par exemple avec un width: 100% sur cette même div.

Pour les notions de HasLayout et de contexte de formatage, voir l'article indiqué ci-dessus.
Modifié par Florent V. (09 Aug 2007 - 10:17)

Bonjour !

Pas de suspense : merci beaucoup ca marche au poil !

Juste une précision, tu dis que IE7 est ok avec un overflow:hidden mais ce n'est pas le cas ! Ni avec un overflow: auto (qui a un meilleur comportement, la bordure du div overflown est correcte contrairement au hidden). Il faut aussi lui rajouter un width: 100% pour qu'il se comporte comme prévu.

Encore merci
Modifié par winzou (09 Aug 2007 - 12:00)

winzou a écrit :
Juste une précision, tu dis que IE7 est ok avec un overflow:hidden mais ce n'est pas le cas !

Tiens, j'aurais pensé que si. Ça marche pour contenir les flottants, mais peut-être pas pour limiter le champ d'application du clear, effectivement. Il faudra que je teste ça.