Debordement div

Bonjour

J'ai un probleme avec des div. Je veux en faire tenir trois cote à cote dans une autre div. J'ai réussit mais j'ai un probleme de dépassement

J'ai créé une div de 300px de haut, et dedans j'ai placé mes 3 div avec 100% de haut chacune. Les divs sont bien positionnées, mais elles semblent déborder par le bas, ce qui est gênant car c'est un effet de design important pour ma page.

Le probleme n'est qu'avec firefox, sous internet explorer ça marche bien.

Voir la page ici : http://www.lacleusb.power-heberg.com/SVM/index.php
Les 3 divs dont je parle sont celles placées en dessous la barre de lien. Vous remarquerez que la div de 300 px dont je parlais a un arriere plan gris. Et celui ci ne descend pas aussi bas de que les div de 100%, donc c'est que ces dernières dépassent.

code html (contient du php, resultat idem sans en utiliser) :

<div id="page">
<div class="site">
<div class="bloc_gauche">
<?
include('cadre_gauche.php');
?>
</div>
<div class="bloc_centre">
<?
include('request.php')
?>
</div>
<div class="bloc_droit">
<?
include('cadre_droit.php');
?>
</div>
</div>
</div>

Code CSS :

#page {
width: 700px;
margin-left: auto;
margin-right: auto;
text-align: left;
}

.site {
width: 100%;
height: 300px;
background: url(bck2.png);
repeat: repeat;
margin-top: 0px;
}

.bloc_gauche {
background-color: black;
width: 140px;
height: 100%;
float: left;
margin-left: 3px;
margin-top: 2px;
margin-bottom: 2px;
}

.bloc_centre {
background-color: black;
width: 430px;
height: 100%;
float: left;
margin-left: 2px;
margin-top: 2px;
margin-bottom: 2px;
}

.bloc_droit {
background-color: black;
width: 120px;
height: 100%;
float: left;
margin-left: 2px;
margin-top: 2px;
margin-right: 3px;
margin-bottom: 2px;
}

En recherchant je suis tombé sur des histoires d'overflow et erase... mais ça marche pas.