.principal {
position: absolute;
}
.gauche {
position: absolute; 
top: 20; 
left: 1; 
height: 500px; 
width: 412px; 
cursor: hand;
}
.droite {
position: absolute; 
top: 20; 
left: 418px; 
height: 498px;
width: 348px; 
cursor: hand;
}
.img {
position: absolute;
}

.ulaffiche{    
/*width:660px;  largeur du conteneur de la gallerie de photos attention à mettre la valeur de la largeur du nombre de colonnes, sinon les photos ne seront pas centrées dans le conteneur*/    
display:block;    
padding:0px; /* pour avoir de la place de chaque côté pour faire dépasser le zoom sur les photos du bord */   
margin:0 auto 0 auto; /* pour centrer la galerie sur la page ou elle sera */    
/*background-color:#666666; couleur de fond de la gallerie */    
overflow:auto; /* pour firefox : permet de prendre en compte les élément float pour le dimensionnement du conteneur de la gallerie */
}
.ulaffiche li {    
float:left; /* chaque conteneur sera en float, les images se metteront donc côté à côté avec retour à la ligne quand elles arrive au bou */    
/* width:128px; largeur de la case qui contient une photo */    
/*height:96px;  hauteur */    
display:block; /* pour enlever les puces de la liste */    
overflow:hidden; /* pour IE : permet de superposer sur le reste la div plus grosse lors du zoom */    
padding:2px; /* bordure autour des images */    
background-color:#000000; /* couleur de fond sous les images */
}
*>.ulaffiche li {
overflow:visible;
} /* pour firefox (propriété invisible pour IE): permet d'afficher la zone de l'image qui dépasse lors du zoom */
.ulaffiche img {    
border:0; /* supprime les bordures bleue des liens */    
 /*height:96px; définit la hauteur des images */    
/* max-height:96px; idem mais pour firefox */ 
}
.ulaffiche li div a {    
float:left; /* positionnement du liens dans la div*/    
margin:0 auto 0 auto; /* centre le liens et donc l'image*/    
/*width:128px;  taille du liens, identique à celle de l'image */    
/*height:600px;  idem */
}
.ulaffiche li div a:hover {    
position:relative; /* position de la div de zoom */    
margin-left:0px; /* marges pour centrer la div zommé par rapport à l'image non zoomé */   
margin-top:0px; /* idem */ 
padding:0px; /* cadre autour de la div zoomé */
width:500px; /* taille du zoom */ 
background-color:#aaaaaa; /* couleur du fond de la div, qui apparaitra autour de l'image, notament sur les images en paysage qui auron des grosses bordures à gauche et à droite */   
border:0px solid #00ffff; /* bordure du zoom */
}
.ulaffiche li div a:hover img {    
width:500px; /* défini la hauteur des images zoomées */   
/*max-height:150px;  idem pour firefox */
}