28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

J'ai un petit soucis de compatibilité entre IE et FF et étrangement, ça marche sous FF et pas sous IE Smiley cligne
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é par mail_pops (12 May 2006 - 14:54)
La réponse a été trouvée sur un autre forum pour ceux que ça intéresse :

En utilisant 'margin-left' au lieu de 'left', on obtient la même chose entre IE et FF. (penser à virer le margin:0 derrière)

Merci à loban.