Problème de float sous Ie 7

Bonjour à tous,

Voila tout est dans le titre, j'ai un problème de compatibilité de float avec Ie7.

En gros j'ai une page web avec une div conteneur appelé "divprincipal" dans laquelle je définit deux autre div appelé "visagegauche" et "visagedroite" dans lesquels j'insère des images.

Voici le code html associé

<div class="principal">

<div class="visagegauche">

<!--Visage de gauche-->


<img src="http://www.askom.fr/face_miniature/face_camille_test.png" OnClick="Javascript:ChargeSWF('1');ChargeTxt('1');ChargeActivite('1');ChargePrenom('1');" id="camille">

<img src="http://www.askom.fr/face_miniature/face_karen_test.png" OnClick="Javascript:ChargeSWF('3');ChargeTxt('3');ChargeActivite('3');ChargePrenom('3');" id="karen">

<img src="http://www.askom.fr/face_miniature/face_louise_test.png" OnClick="Javascript:ChargeSWF('5');ChargeTxt('5');ChargeActivite('5');ChargePrenom('5');" id="louise" >

<img src="http://www.askom.fr/face_miniature/face_maddy_test.png" OnClick="Javascript:ChargeSWF('7');ChargeTxt('7');ChargeActivite('7');ChargePrenom('7');" id="maddy" >

<img src="http://www.askom.fr/face_miniature/face_mary_test.png" OnClick="Javascript:ChargeSWF('9');ChargeTxt('9');ChargeActivite('9');ChargePrenom('9');" id="mary">


<!--Fin Visage de gauche-->
</div>

<div class="visagedroite">

<!--Visage de droite-->

<img src="http://www.askom.fr/face_miniature/face_carl_test.png" onclick="ChargeSWF('2');ChargeTxt('2');ChargeActivite('2');ChargePrenom('2');" id="carl" >

<img src="http://www.askom.fr/face_miniature/face_fabrice_test.png" onclick="ChargeSWF('4');ChargeTxt('4');ChargeActivite('4');ChargePrenom('4');" id="fabrice">

<img src="http://www.askom.fr/face_miniature/face_jean_test.png" onclick="ChargeSWF('6');ChargeTxt('6');ChargeActivite('6');ChargePrenom('6');" id="jean">

<img src="http://www.askom.fr/face_miniature/face_pierre_test.png" onclick="ChargeSWF('8');ChargeTxt('8');ChargeActivite('8');ChargePrenom('8');" id="pierre">

<img src="http://www.askom.fr/face_miniature/face_robby_test.png" onclick="ChargeSWF('10');ChargeTxt('10');ChargeActivite('10');ChargePrenom('10');" id="robby">

</div> 

Je créer donc un fichier CSS pour mettre en forme ces Div

.principal{
width:955px; 
height:638px;
border:#FF0000 solid 1px;

}
/* CSS Visage de gauche */

.visagegauche{
margin-left:165px;
/margin-right:720px;
margin-top:105px; 
width:70px; 
height:400px; 
border:#FF0000 solid 1px;
[b]float:left;[/b]
}

#camille{
cursor:pointer;
margin-left:10px;
/margin-left:0px; 
margin-top:20px;
}

#karen{
cursor:pointer;
margin-left:10px;
/margin-left:0px; 
margin-top:25px;
}

#louise{
cursor:pointer;
margin-left:10px; 
/margin-left:0px;
margin-top:30px;
}

#maddy{
cursor:pointer;
margin-left:10px; 
/margin-left:0px;
margin-top:30px;
}


#mary{
cursor:pointer;
margin-left:10px; 
/margin-left:0px;
margin-top:25px;
}

/* Fin CSS visage de gauche*/

/* CSS Visage de droite */

.visagedroite{
border:#FF0000 solid 1px;
width:70px; 
height:400px;
margin-right:135px;
margin-top:105px;
[b]float:right;[/b]
}

#carl{
cursor:pointer;
margin-left:10px;
/margin-left:0px; 
margin-top:20px;
}

#fabrice{
cursor:pointer;
margin-left:10px;
/margin-left:0px; 
margin-top:25px;
}

#jean{
cursor:pointer;
margin-left:10px; 
/margin-left:0px;
margin-top:30px;
}

#pierre{
cursor:pointer;
margin-left:10px; 
/margin-left:0px;
margin-top:30px;
}


#robby{
cursor:pointer;
margin-left:10px; 
/margin-left:0px;
margin-top:25px;
}

/* Fin CSS visage de droite*/

Pour aligner mes deux Div "visagegauche" et "visagedroite" j'utilise des float (En gras dans le code ci dessus).

Mon problème est que sous FF3 pas de souci mes Div s'alignent correctement alors que Ie7 semble ignorer complètement les floats et positionne la Div "visagedroite" sous la Div "visagegauche".

Je vous remercie d'avance de l'attention que vous porterez a ce problème et j'espere que vous m'aiderez a trouver la solution car la je cale complètement.
Modifié par Jarjar (17 Dec 2008 - 12:15)

Je ne connais pas le "hack" / (si s'en est un) mais c'est lui qui pose problème. Ou du moins les margin qui vont avec.

EDIT : enfin, surtout "/margin-right:720px;" Les autres étant à zéro c'est pas trop gênant.
Modifié par Yasashii (17 Dec 2008 - 13:30)