Div contenedor no coge color de fondo en Firefox

[ciberpata]

Hola a todos:
Tengo un div "contenedor" que tiene el color de fondo blanco, que contiene a todos los otros divs que hay en mi pagina web. Pero resulta que si el div central es mas alto que el div izquierdo que es donde tengo un menu por debajo de ese menu no se ve el fondo blanco. Esto me pasa en el firefox, sin embargo en el IE se ve bien.
No entiendo porque teniendo un div contenedor su color de fondo no se aplica a todos los divs que contiene. Incluso he probado a ponerle el fondo a cada div y nada.

Vean mi css

Código:

div#contenedor {
    width: 960px;
    height: 100%;
    margin: 0 auto;
    text-align: left; /*Para poder centrar un DIV en IExplorer*/
    background: white;
}

div#izquierda {
    width: 230px;
    float:left;
    background: white;
    min-height: none;
}

div#central {
    width: 518px;
    float:left;
    background: white;
}

div#derecha {
    width: 178px;
    float:left;
    background: white;
}

y esta es mi pagina

Código:

<div id="contenedor">
  <div id="cabeceraweb"><%CabeceraWeb%></div>
    <div id="izquierda">
        <div id="listonizquierda"><img src="images/iconos/santiagolateralizqdo.gif"></div>
        <div id="menuizquierda">
    <table><tr><td>
        <%MenuIzquierdo%>
    </td></tr></table>
    </div>
  </div>
   
    <div id="central">
        <div id="cabeceraopciones"><img src="images/iconos/cabeceranoticias.gif" width="86" height="19"></div>
        <div id="datos">
        <%RsNoticias.movefirst%>
        </div>
   </div>   
 
  <div id="derecha">
          <div id="idiomas">
          <%BanderasIdiomas%>
        </div>
        <div id="menunaranjaarriba"><%MenuDerecho%></div>  </div>
 </div>
</div>

Pueden ayudarme a resolver este problema?

[Mikmoro]

Yo probaría a ponerles background: transparent; aunque con esas variables imagino que cargas cosas que no podemos saber cómo son.

[ciberpata]

He probado a meter transparente y nada. Todo sigue igual. Esas variables cargan menus en javascript por lo que no debería afectarle

[Mikmoro]

Repito: ¿qué contenido generas con las variables <%CabeceraWeb%>, <%BanderasIdiomas%> por ejemplo?

[Mikmoro]

Ah, vaya vaya, no había visto bien tu código. No es que no se vea el fondo blanco, es que todas las cajas están flotadas y por eso no crece el contenedor. Añade:

<div class="corte"></div>

justo antes de cerrar el contenedor, y ahora en tu css.

.corte {clear: both;}

[ciberpata]

ya funciona bien. Pero puedes explicarme el por qué?.

[Mikmoro]

Pues por lo que te he dicho en el mensaje anterior, que cuando las cajas están flotadas no ocupan lugar físico en el flujo del documento y no hacen crecer a su caja contenedora. Dando ese corte le obligas a crecer tanto como su contenido.

[punk567]

hola, también tienes la opción de utilizar este código css:

Código:

* html .clearfix { height: 1% }
.clearfix { display: inline-block}
html[xmlns] .clearfix { display: block}
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden }

y luego en html:

Código:

<div id="contenedor" class="clearfix">

min-height: none; esto no es válido W3C.

saludos

[ciberpata]

Pues muchísimas gracias por la ayuda y la explicación. LLevaba días intentando arreglarlo
Lo dicho, gracias