Увеличить Div при наводе и вывести поверх всего на странице

[djonA]

Подскажите, есть несколько div с произвольной информацией, с заданной высотой (часть информации скрыта). Надо при наведении на него увеличить его высоту, что бы вся информация вывелась на странице и надо сделать его поверх остальной информации.

Вот div'ы:

<style>
.infa {background:red none repeat scroll 0 0;border:1px solid black;}
</style>

<div style="width:100%">
<div style="float:left;width:25%;">
<div style="height:10px;overflow:hidden;" class="infa"><br><br><br><br>1</div></div>
<div style="float:left;width:25%;">
<div style="height:10px;overflow:hidden;" class="infa"><br><br><br><br>2</div></div>
<div style="float:left;width:25%;">
<div style="height:10px;overflow:hidden;" class="infa"><br><br><br><br>3</div></div>
<div style="float:left;width:25%;">
<div style="height:10px;overflow:hidden;" class="infa"><br><br><br><br>4</div></div>
</div>
<div style="width:100%">
<div style="float:left;width:25%;">
<div style="height:10px;overflow:hidden;" class="infa"><br><br><br><br>5</div></div>
<div style="float:left;width:25%;">
<div style="height:10px;overflow:hidden;" class="infa"><br><br><br><br>6</div></div>
<div style="float:left;width:25%;">
<div style="height:10px;overflow:hidden;" class="infa"><br><br><br><br>7</div></div>
<div style="float:left;width:25%;">
<div style="height:10px;overflow:hidden;" class="infa"><br><br><br><br>8</div></div>
</div>

Надо при наводе на class="infa" увеличить до реального размера, и вывести его поверх остальных окон, position="absolute"

[djonA]

Сделал вот так, подскажите насколько кросбраузерно, ну и эстетично:

<style>
.click{ width: 24%; border: 1px #bababa solid;float:left;}
.one {position: relative;width: 100%;}
.click .overlay{width: 100%;  background: #ffcc00;height: 50px;overflow: hidden;}
.click:hover .overlay{position: absolute;top: 0; left: 0; z-index:1;border: 1px #bababa solid;height: 100%;width: 100%;display: table;}
</style>
<div style="width:100%">
<div class="click">
  <div class="one">   <div class="overlay">1<br><br><br><br>11</div>  </div>         	 
</div>
<div class="click">
     <div class="one"><div class="overlay">2<br><br><br><br>22</div></div>         	 
</div>
<div class="click">
    <div class="one"> <div class="overlay">3<br><br><br><br>33</div> </div>          	 
</div>
<div class="click">
   <div class="one">  <div class="overlay">4<br><br><br><br>44</div> </div>          	 
</div></div>

<div style="width:100%">
<div class="click">
  <div class="one">   <div class="overlay">1<br><br><br><br>11</div>  </div>         	 
</div>
<div class="click">
     <div class="one"><div class="overlay">2<br><br><br><br>22</div></div>         	 
</div>
<div class="click">
    <div class="one"> <div class="overlay">3<br><br><br><br>33</div> </div>          	 
</div>
<div class="click">
   <div class="one">  <div class="overlay">4<br><br><br><br>44</div> </div>          	 
</div></div>