Choix gabarit css + probleme hover

Bonjour,

Je suis débutant en css.

1/ Je ne sais pas trop ce qu'il faut prévoir comme div pour un gabarit donnant 4 blocs les uns en dessous des autres, chaque bloc étant constitué de 3 blocs chacun. Selon les exemples que j'ai vu, les approches sont différentes. 4 div contenant chacun 3 div ou bien 12 div répartis sur 4 lignes de 3 div (ce qui diminue le nombre de div) ? De même, parfois il y a un conteneur général contenant tout et parfois non.

2/ J'ai un problème avec un hover. Au survol d'une image, je veux faire afficher un bloc de 3 images envoyant chacune vers un lien différent.
J'arrive à faire apparaître le bloc en question mais je ne vois pas comment les rendre réactives.
On peut voir ce que ça donne actuellement sur http://parsl.free.fr (l'image à survoler est la roue d'engrenage à droite du titre "MENU1". D'ailleurs avec firefox, le bloc est bien placé mais avec internet explorer il est décalé vers le haut.

Ci-dessous le code :
CSS

/*
4 blocs composés de 3 blocs chacun :
- header composé de : hleft, hcenter, hright
- user composé de : uleft, ucenter, uright
- main composé de : mleft, mcenter, mright
mleft et mright sont de largeur fixe et destinés à accueillir des menus.
mcenter est destiné à recevoir le contenu de la page.
- footer composé de : fleft, fcenter, fright
*/
  #header {
  height: 80px;
  }
  #header #hleft {
  float: left; 
  height: 80px;  
  background-color: #cccccc;
  }
  #header #hcenter {
  height: 80px;  
  background-color: #cc9999; 
  text-align: center;
  }
  #header #hright {
  float:right;  
  height: 80px;  
  background-color: #cccccc;
  }
  
  #user {
  height: 30px;  
  margin-top: 2px;  
  background-color: #f7d033;
  }
  #user #uleft {
  float: left;  
  width: auto;  
  height: 30px;
  }
  #user #ulogin {
  float: left;  
  width: auto;  
  height: 30px;
  }
  #user #ucenter {
  width: 120px;  
  height: 30px;  
  background-color: #cccccc;  
  margin-left: 600px; 
  text-align: center;
  }
  #user #uright {
  float: right;  
  width: auto;  
  height: 30px;  
  background-color: #f7d033;
  }
  
  #main {
  clear: both; 
  margin-top: 2px;  
  }
  #main #mleft {
  float:left;  
  width: 170px; 
  }
  #main #mcenter {
  height:100px; 
  margin-left: 174px;  
  margin-right: 174px; 
  text-align: center; 
  background-color: #cccccc;
  }
  #main #mright {
  float:right;  
  width: 170px;
  background-color: #f7d033; 
  text-align: center;
  }
  
  #footer {
  clear: both;  
  height: 20px; 
  }
  #footer #fleft {
  float: left;  
  width: auto;  
  height: 20px;  
  background-color: #efe2f0;
  }
  #footer #fcenter {
  width: 0px;  
  height: 20px;  
  background-color: #214158;
  }
  #footer #fright {
  float:right;  
  width: auto;  
  height: 20px;  
  background-color: #214158;
  }

/*
blockmenu reçoit un titre de menu (une image à gauche 
+ un lien au centre + un background) et des sous-menus. 
Au survol de .title celui-ci change de couleur de background. 

backoffice contient une image réactive superposée au titre 
et placée à droite de celui-ci. 
Au survol de cette image, un petit bloc .config en ligne 
apparaît et se superpose au titre. 
.config contient des images réactives affichées en ligne e
t envoyant vers des éléments de configuration du menu. 
*/  
.blockmenu {
width: 170px;	
margin: 0px 0px 2px 0px;	
padding: 0px;  
border:1px solid #214158;
}
.blockmenu .title {
height: 30px;  
border: 0px;  
background-color: #cc0000;
}
.blockmenu .title a {
display: block ;	
width: 100%;  
color: #ffffff; 
background-color: #214158;  
text-decoration: none; 
text-align: center;  
line-height: 32px;
}
.blockmenu .title a:hover {
background-color: #cc0000;
}	
.blockmenu .title .picto {
position:absolute; 
margin: 4px 0px 0px 4px; 
}
.blockmenu .backoffice {
position:absolute; 
margin: -27px 0px 0px 145px; 
background: none
}	
.blockmenu .backoffice img {
margin: 0px 5px 0px 0px; 
background: none; 
border : none;
}	
.blockmenu .backoffice {
position:absolute; 
margin: -27px 0px 0px 145px; 
}	
.blockmenu .backoffice a {
text-decoration: none; 
}
.blockmenu .backoffice a span {
display: none;
}	
.blockmenu .backoffice a:hover {/* correction d'un bug IE */
background: none;
} 
.blockmenu .backoffice a:hover span {
display: block; 
position: absolute; 
margin: -30px 0px 0px -110px; 
width: 110px; 
height: 27px; 
text-align: right; 
background: green
}  

XHTML

<div id="header">

<div id="hleft">
  <span>Image de la bannière de dimension variable</span>
</div>
<div id="hright"><span>Contenu hright</span></div>
<div id="hcenter"><span>Contenu hcenter</span></div>
</div>

<div id="user">

<div id="uleft"><span>Contenu uleft</span></div>
<div id="uright"><span>Contenu uright</span></div>
<div id="ucenter"><span>Contenu ucenter</span></div>
</div>

<div id="main">

<div id="mleft">
  <div class="blockmenu" >
    <div class="title">	
      <img class="picto" src="menu1.png"></img>                 
      <a href="dépliage du menu avec apparition des sous-menus">MENU1</a>               
    </div>
    <div class="backoffice">
     <a href="#"><img src="system.png" />
       <span>
         <img src="admin.png" />
         <img src="up.png" />
       </span>
     </a> 
    </div>    
  </div>
</div>
<div id="mright">
  <span>Contenu mright</span>	
</div>
<div id="mcenter">
  <span>Contenu mcenter</span>	
</div>	

</div>  
   	
</div>

Merci à ceux qui pourront me conseiller, en espérant avoir été assez clair dans mes explications.

Didier