<div>
<div pos="top left tableau no"><div pos="sub">Staff</div><span class="hover">Un gars<span class="infobulle">lol</span></span></div>
<div pos="top midl no tableau">banniére</div>
<div pos="top right tableau no"><div pos="sub">Nouveautés</div>des nouveautés</div>
<div pos="left middle no tableau">espace texte</div>
<div pos="bottom left no tableau"><div pos="sub">Partenaires</div>hop là</div>
<div pos="bottom right tableau">Bloc note</div>
<div pos="bottom right tableau">Espace texte</div>
<div pos="bottom right no tableau"><div pos="sub">Liens utiles</div>Mon texte</div>
</div>

div[pos~=tableau] {
   padding:5px;
   margin:2%;
   float:left;
   border:#000 solid 3px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   height:147px;
   }

div[pos~=top] {
   width:25%;
   }
div[pos~=bottom] {
   width:18%;
   }

div[pos~=left] {
   clear:left;
   }
div[pos~=top][pos~=midl] {
   width:403px;
   height:147px;
   }

div[pos~=middle] {
   float:none;
   margin-left: auto;
     margin-right: auto;
   width:200px;
   text-align: center;
   }
   
div[pos~=no] {
   border:none;
   -webkit-border-radius: none;
   -moz-border-radius: none;
   border-radius: none;
   }
.infobulle {
   display:none;
   }
   
.hover:hover .infobulle {
   display:inline;
   border: 3px #000 solid;
   position:relative;
   top:10px;
   left:10px;
   background:#685266;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   }
   
   div[pos~=sub] {
      border-bottom:solid #000 2px;
      }
   div[pos~=top][pos~=right] {
   overflow:auto;
   }