Bonjour.

Je n'arrive pas à gérer mes FLOAT correctement. Pouvez-vous m'aider ?

Voici la maquette de ma page.

http://fifracol.free.fr/Temp/Pb_site.png

- il y a un conteneur général qui englobe tout.
- le float1 contient le sommaire, il est placé en float à gauche du Corps1
- le float2 contient des infos secondaires, il est placé en float à droite du Corps2
- le texte du Corps2 est réparti dans des <div class="corps3"> les uns en dessous des autres ; chaque Corps3 s'adapte naturellement en hauteur au texte contenu.
- il y a au début de chaque texte contenu dans les Corps3 une sorte de lettrine, placée en float à gauche des paragraphes, pour que le texte se cale contre la lettrine et se coule dessous quand il dépasse la lettrine en hauteur
- quand le texte n'arrive pas jusqu'en dessous de la lettrine, le Corps3 s'adaptant au texte contenu, la lettrine, disgracieusement, dépasse inférieurement du Corps3. Pour l'éviter j'ai pensé à mettre un <div class="base"> dont le style précise "clear: both;"

Et c'est là que ça devient embêtant : pour se placer, ce <div class="base"> se cale soit sur le float1 ou le float2 et non sur la lettrine, si la base du float1 ou du float2 se situe plus bas que la lettrine ! Si je mets "clear: left;" ou "clear: right"; il se cale sur respectivement le float1 ou le float2.

Je n'arrive pas à comprendre pourquoi il se réfère à un float plus "lointain" que le float le plus proche.

Quelle méthode utiliser pour pallier ce problème ?

Merci pour toute aide.
Modifié par Piteur511 (01 Oct 2007 - 17:37)
Salut Piteur511 Smiley cligne ,

un coup d'oeil sur Float, clear et contextes de formatage devrait t'éclairer sur le pourquoi et un :
.cadre_centre {
overflow: auto;
...
}

<!--[if lte IE 6]>
<style type="text/css">
.cadre_centre {
height: 1%;
}
</style>
<![endif]-->
devrait régler le comment Smiley smile .

A+
Modifié par Heyoan (20 Sep 2007 - 01:29)
Heyoan a écrit :
Salut Piteur511 Smiley cligne ,
un coup d'oeil sur Float, clear et contextes de formatage devrait t'éclairer sur le pourquoi (...)
A+
Grand merci pour cette réponse tout à fait éclairante. Je m'y remets dès que possible... Smiley sweatdrop

-----------EDIT----------------

Essai concluant ! Merci.
Modifié par Piteur511 (20 Sep 2007 - 15:35)