Adapter la hauteur d'un <div> son contenu

Bonjour à tous,

Ma page est composée comme ceci :

CSS :

#conteneur {
   width:900px;
   height:600px;
}
#banniere {
   width:900px;
   height:150px;
   float:none;
}
#centre {
   width:900px;
   height:450px;
   float:none;
}
#centre_gauche {
   background-image:url(image1);
   width:15px;
   height:450px;
   float:left;
}
#centre_centre {
   width:870px;
   height:450px;
   float:left;
}
#centre_droite {
   background-image:url(image2);
   width:15px;
   height:450px;
   float:left;
}

HTML :

<div id="conteneur">
   <div id="banniere"></div>
   <div id="centre">
      <div id="centre_gauche"></div>
      <div id="centre_centre">
         .Contenu variable.
      </div>
      <div id="center_droite"></div>
   </div>
</div>

Mon probléme est que, selon si mon texte (.Contenu variable. ) est grand, mon <div> ( #centre_centre ) ainsi que les deux autres contenant une image ( #centre_gauche et #centre_droite ) ne s'agrandissent pas et le texte chevauche mes <div> ...
J'ai essayé de supprimer la taille définie dans le CSS mais rien n'y fait, le probléme est toujours là.

Le probléme n'est présent que sous IE. Sous Firefox, cela ne fonctionne pas.

Au passage, j'ai un autre petit probléme:
Sous IE, lorsque mon texte est assez grand pour étirer le <div> ( #centre_centre ), les images contenues dans les <div> adjacents ne se répétent pas ...

Comment régler ces problémes ?

Merci d'avance

Étape 1 : on supprime toutes les hauteurs fixes, qui n'ont rien à faire là (sauf si l'on peut garantir que le contenu ne dépassera jamais les 450px de hauteur... et dès que le contenu contient du texte on ne peut pas le garantir). Si on veut des hauteurs minimales extensibles, on pourra jeter un oeil à la propriété CSS min-height (attention, pas supportée par IE6, mais ok avec IE7).

Étape 2 : on s'occupe des dépassements d'éléments flottants. La FAQ de ce forum en parle.
Sinon, un petit topo ici :
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html