[HTML/CSS] float imbriqués non gérés sous IE

[_Raynor_1_1]

Bon(soir|jour) à tou(te)s,

J’ai un petit problème avec ce cher navigateur (?) qu’est Internet Explorer…

Je vous explique :
D’abord, les deux images représentant la même page vue par Mozilla (1.7.2), puis par Internet Explorer (6.0)
Mozilla 1.7.2 (résultat impécable) (1009x587 - 105.79 Ko)
IE 6.0 (1024x624 - 104.65 Ko)

En fait, la partie gauche de ma page (le panneau latéral, avec la pub) est en float: left. La partie droite de ma page (le contenu propre) est donc ainsi au même niveau que le panneau latéral.

Puis, dans la partie droite de ma page, j’ai mis un gros div par “Packs”, et dedans, y’a l’image qui est elle aussi en float: left et le texte habille donc l’image par la droite (si il y avait plus de texte, il viendrait dessous l’image telle une lettrine).
Et comme je ne veux pas que "Résumé passe à droite de l’image, j’ai mis un
juste après le texte pour définir qu’à partir de là, on habille plus l’image.

Mais là où c’est problématique c’est que, sous IE, la partie suivant le
ne débute qu’a la fin du panneau (dont j’ai fait apparaître les bordures pour mieux voir), ce qui donne cet espace entre le texte du premier Pack et “Résumé”.
C’est comme si IE ne pouvait pas bien gérer des “float imbriqué”…

Je me suis aussi rendu compte que si, par exemple, je veux mettre l’image à droite du texte et non à gauche, je modifie donc mon image en lui mettant float: right et je modifie aussi le
pour lui mettre clear: right, alors là ça marche comme il faut : pas l’espace à rallonge sous IE.
Mais cependant, mettre l’image à droite c’est moche, je la voudrais à gauche…

Auriez-vous une solution ?

[Sans-Nom]

Passe ton élément en position absolue, ajoute un padding, etc…

[_Raynor_1_1]

L’image en position absolue ?

[Sans-Nom]

waip

[_Raynor_1_1]

Mais ainsi, l’image se placera au dessus du texte…

[_Raynor_1_1]

Je viens de voir que sur le site du W3C : http://www.w3.org, ils ont pas ce genre de problèmes (encore heureux :D) et pourtant ils utilisent comme moi, un float: left; pour le panneau de gauche, et un autre pour l’image d’une news (pour le moment, c’est celle intitulée “Massimo Marchiori Receives Technology Review TR100 Honor”)

[_Raynor_1_1]

Finalement, j’ai pu m’en sortir modifiant les attributs CSS de #panneau et de #page, mais, pour cela, j’ai du définir la largeur de #page alors que dans la version précédente, je n’en avais pas besoin. Mais ce qui est dommage, c’est que cette largeur, définie en pourcentage, ne me permet pas d’occuper exactement tout l’espace se trouvant sur la droite

[spiderch_1_1]

tu veux pas nous donner le code de ton css, on pourrait mieux t’aider

[_Raynor_1_1]

Oui, en effet, ça serait plus simple.
[cpp]body {
background-color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666666;
padding: 0px;
margin: 0px;
text-align: justify;
}

#corps #panneau {
float: left;
width: 160px;
padding: 25px 10px;
text-align: center;
/** border: 1px solid red; **/
}

#corps #page {
padding: 15px 10px;
margin-left: 180px; /** Largeur du panneau + 2x le padding horizontal (deuxième argument) du panneau /
/ border: 1px solid green; **/
}[/cpp]
et pour la page
[cpp]

[/url]

####, Partenaire du Green de l’Espoir à la Tour de Salvagny, compétition amicale de golf pour aider la lutte contre la Mucoviscidose.

> Envoyez vos dons ![/url] <

Mini-Menu de navigation : Tous les packs[/url] | [b]Pack Mini[/b] | Pack Light[/url] | Pack Medium[/url] | Pack Maxi[/url] | Pack e-Commerce[/url] | Tableau comparatif[/url]

---

[/url]

	<img src="interface/offres/packs/1.jpg" width="100" height="100" style="float: left;" border="0" alt="Pack Mini">
	############################################################<br style="clear: left;" />
	

	R&amp;eacute;sum&amp;eacute; :

•   #### : <font class="surlignage">####&amp;nbsp;&amp;euro; H.T. / ####&amp;nbsp;&amp;euro; T.T.C.</font>
  

[/cpp]

J’hésite à donner l’URL de la page car le site est quand même à but commercial

[_Raynor_1_1]

Le code que j’ai donné est celui où les float: imbriqués ne marchent pas sous IE mais où le div de droite (#page) occupe par défaut la totalité de la largeur restante à droite.

[spiderch_1_1]

je n’ai malheureusement pas de solution pour le moment … mais pour te rassurer, je suis également concerné par ce problème

[_Raynor_1_1]

Ce message n’était pas conforme aux règles d’utilisation du nouveau forum :

[_Raynor_1_1]

Je reviens sur ce sujet car le fait que mes deux div (#page et #panneau) ait une largeur me gène…

Je suis tombé sur cet article :
http://www.zdnet.fr/builder/web_design/conception_site/0,39021086,39172674-1,00.htm
qui permet de faire une présentation en 3 colonne qui tienne bien la route, mais elle présente le même problème :
Comme elle utilise des float et des clear, sous IE (5.0), il est impossible de s’en servir dans le div de la colonne du milieu car le texte après le clear débutera alors au niveau de la fin de la colonne immédiatement à gauche

Est-il possible de “réduire” l’étendue d’un float et/ou d’un clear ?