Probleme bloc float avec firefox

Bonjour à tous,

J'essaie d'utiliser des blocs avec "float" pour créer 3 colonnes, ça marche avec IE, avec googlechrome mais pas avec firefox.
Voici la page du site que je travaille :

http://www.lanaturedacote.fr/spip.php?article14

le problème concerne le bloc du bas, voici mes pages html et css de cette partie (le site est sous spip) :

page html:



<div id="blocbas">

<div id="blocbasgauche">

<p id="memerub"> A voir aussi : </p>

<ul class="menuartibis">
<BOUCLE_arti7 (ARTICLES) {id_rubrique} {par titre} {exclus}>
<li><a href="#URL_ARTICLE">#TITRE</a><br/>[(#DESCRIPTIF)]
</li>
</BOUCLE_arti7>
</ul>

</div>

<div id="blocbasdroit">
</div>

<div id="blocbascentre">

<div id="textearti"> [(#TEXTE)]
</div>

</div>

</div>



Page css:


#blocbas{
position:absolute;top:180px;left:0;
width:100%; height:100%;background-color:rgb(080,097,080);
}


#blocbasgauche {
float:left;
width: 20%; height:100%;
}

#memerub {
font-size:18px; font-weight:normal;
font-family:"Trebuchet MS", "Segoe UI", Shruti, sans-serif;
padding-top:20px;text-align:center;padding-bottom:10px;
}

.menuartibis{
list-style-type: none; text-align:left; font-size:16px;
}

.menuartibis li {
margin-bottom: 0;margin-left:-25px;
}


#blocbasdroit {
float:right;
height:100%;width:2%;
}

#blocbascentre {
overflow:hidden;

}

#textearti{
font-size:15px;color :rgb(000,000,000);
padding-right:25px;padding-left:25px;padding-bottom:15px;padding-top:20px;
font-family:"Trebuchet MS", "Segoe UI", Shruti, sans-serif;text-align:center;
background-color:rgb(160,195,160);
}



Si quelqu'un peut m'aider ? J'ai essayé de mettre des valeurs de width et de height au div du centre, mais ça ne change rien au contraire ça bloque la hauteur de la page.

Merci d'avance

Cordialement