[RESOLU]Problème de Float (alignement) sur IE6

Bonjour à toutes et à tous,

J'ai un problème d'alignement de 2 blocs spécifiquement sous IE6 (l'un des deux blocs est en float) :



Voici mon code CSS :

div#global {
	width:950px;
	margin:auto;
}
div#global div#colonne {
	width:370px;
	float:left;
	background:#F00;
	}
div#global div#contenu {
	width:570px;
	margin-left:380px;
	background:#0F0;
	}	

Merci pour votre aide !
Modifié par Technimedia (14 Oct 2009 - 12:00)

Salut,

Ca sent à plein nez le Three Pixel Jog :
http://www.test.blog-and-blues.org/haslayout/tests/float6.html
http://www.positioniseverything.net/explorer/threepxtest.html

bonjour,

Le plus gros souci provient de la difference de formatage entre certaine version de IE et les autres navigateurs.

le width , appliqué a #contenu" dote de layout ce conteneur , il va appliqué dans IE6/7 la marge a partir de l'element flottant a sa gauche , ailleurs ce sera a partir du bord gauche du conteneur parents (ou fenetre) .

Que faire ?
1) se renseigner sur les contextes de formatage (via google ou ce site)
2) enlever la marge et mettre overflow:hidden; par exemple a #contenu

div#global div#contenu { 
    width:570px; 
    overflow:hidden;  
    background:#0F0; 
    } 

Ceci ne resout pas le petit soucis des 3 pixels ,

Pour regler ces deux problemes , on peut mettre les deux elements (colonne et contenu) en float:left; et appliqué l'overflow a global .

GC

Bonjour,

Grâce à vos recommandations, c'est résolu.

Merci pour votre aide !