Position:relative dans un div plus petit

[sderenty]

Bonjour à tous,

J'ai un petit soucis de compatibilité entre IE et FF et étrangement, ça marche sous FF et pas sous IE ;-)

Je m'explique : j'ai une page contenant trois div flottant (deux à gauche et le troisième à droite).

Dans le div de droite, je place un nouveau div (appelons-le panier), qui est plus large que le div qui le contient.

Ce panier est en position relative et décalé de 100px sur le gauche, afin de mordre sur les deux div de droite.

Alors que tout se passe bien sous FF, sous IE, le div de droite s'agrandit à la taille du panier (alors que celui-ci, sorti du flux, ne devrait pas influer sur les autres div).

Pour être plus simple, voici un petit exemple :

<div style="width:720px;height:300px;margin:0;padding:0;float:left;background-color:black;">
	<div style="width:100px;height:200px;margin:0 10px 0 0;padding:0;float:left;background-color:red;">
  left
	</div>
	<div style="width:500px;height:200px;margin:0 10px 0 0;padding:0;float:left;background-color:blue;">
  center
	</div>
	<div style="width:100px;height:200px;margin:0;padding:0;float:right;background-color:green;">
  <div style="width:200px;height:60px;position:relative;left:-100px;margin:0;padding:0;background-color:yellow;">
	  Panier
  </div>
  right
	</div>
</div>

(J'ai mis les styles dans la page pour faciliter vos tests).

L'effet voulu est visible sous FF.

Si quelqu'un a une idée, ça me dépannerait vraiment.

Merci.

Séb.

Modifié 19 Avril 2007 par Portekoi

[loban]

En utilisant 'margin-left' au lieu de 'left', tu obtiens la même chose entre IE et FF.

<div style="width:720px;height:300px;margin:0;padding:0;float:left;background-color:black;">
<div style="width:100px;height:200px;margin:0 10px 0 0;padding:0;float:left;background-color:red;">
 left
</div>
<div style="width:500px;height:200px;margin:0 10px 0 0;padding:0;float:left;background-color:blue;">
 center
</div>
<div style="width:100px;height:200px;margin:0;padding:0;float:right;background-color:green;">
 <div style="width:200px;height:60px;position:relative;margin-left:-100px;background-color:yellow;">
  Panier
 </div>
 right
</div>
</div>

[sderenty]

En utilisant 'margin-left' au lieu de 'left', tu obtiens la même chose entre IE et FF.

Effectivement, ça semble marcher impec.

Merci beaucoup.

Séb.

[PierreK]

Bonjour,

j'ai eu exactement le même souci et confirme : utiliser left-margin au lieu de left a parfaitement fonctionné.

Merci beaucoup pour cette astuce !

--

Pierre