[AYUDA] Problema con height:auto, no toma el tamaño de un float

[matiD]

Hola a todos bueno el problema es el siguiente, tengo un contenedor, de fondo blanco, y una maquetacion a 3 columnas, bueno resulta lo siguiente, el contenedor toma solo el tamaño de la columna central, que es la unica que no es float. entonces no me da el fondo blanco para todo el lugar que necesito

ACLARO ESTO SOLO SUCEDE EN FIREFOX Y CHROME, en IE funciona bien.

estos son los div en CSS

PINTO LA COLUMNA IZQUIERDA DE CELESTE PARA QUE SE VEA LA DIFERENCIA CLARAMENTE, EN REALIDAD VA SIN FONDO, Y EL BLANCO SE LO DEBIERA DAR EL CONTENEDOR

Código:

/*CONTENEDOR*/
#sombracont{
width:770px; height:auto; margin:auto;
background-image:url(images/fondo.png); background-repeat:repeat-y;
}

#contenedor{
width:750px; margin:auto; height:auto;
background-color:#FFFFFF;
border-left:#666666 solid 1px; border-right:#666666 solid 1px;
}

/*COLUMNAS*/
#izquierda{
float:left;
margin:0;
width:175px; height:auto;
background-color:#00CCFF;
font-size:11px; border-right:#666666 solid 1px;
}

#derecha{
float:right;
width:150px; height:auto;
margin:0;
}

#centro{
vertical-align: top middle;
margin-left:180px;
width:415px; height:auto;
}

/*PIE*/
#pie{
width:750px; height:auto; margin:auto;
text-align:center;
background-color:#FFFFFF;
border-right:#666666 solid 1px; border-left:#666666 solid 1px;
}

#sombrapie{
width:770px; height:auto; margin:auto;
background-image:url(images/fondo.png); background-repeat:repeat-y;
}

De paso aprovecho el pie en Chrome y Firefox se ve separado del contenedor eso no deberia pasar, en IE no pasa. La idea es que se vea como se ve en IE pero en Firefox y Chrome

Internet Explorer 7:


Firefox:


Google Chrome:


bueno creo que se ve claramente lo que quiero decir, espero puedan ayudarme

asi tengo los Divs enel html (no pongo la cabecera porque no es el problema)

Código:

<div id="sombracont">
<div id="contenedor">

   <div id="izquierda">
   </div>
   <div id="derecha">
   </div>
   <div id="centro">
   </div>

</div>
</div>

Saludos y gracias desde ya a quien pueda ayudarme.

[the_web_saint]

Código html:

<div id="sombracont">
<div id="contenedor">
 
   <div id="izquierda">
   </div>
   <div id="derecha">
   </div>
   <div id="centro">
   </div>
<div style="clear:both;"></div>
</div>
</div>
 

Intenta de este modo.

Saludos

[talmente]

Hola, añade al contenedor float: left;