Capas con atributo 'float' no muestran fondo

[scrolling]

Hola, mi problema es que tengo 3 capas. La primer capa tiene una imagen de fondo y contiene a las otras dos capas. Las dos capas que estan dentro tienen el atributo 'float: left' y 'float:right' respectivamente para acomodarlas a la izquierda y a la derecha. La posición de las capas queda perfecto. El problema es que al utilizar el atributo 'float' el fondo de la capa que las contiene no se muestra, más bien muestran el fondo de la página, como si la capa que las contiene no tubiera fondo. Si quito el atributo 'float' el fondo aparece, pero no quedan acomodadas. Esto sucede en todos los navegadores excepto en internet explorer.

Alguien sabe como podría hacer que las dos capas mostraran el fondo de la capa 'madre' aunque utilice el atributo 'float'???

Gracias de ante mano y ojalá me hayan entendido.

[Raulmmmm]

Sí, pon esto justo antes de que acabe el contenedor:
<div style="clear: both;"></div>

[eContento]

Iniciado por scrolling

[...]El problema es que al utilizar el atributo 'float' el fondo de la capa que las contiene no se muestra, más bien muestran el fondo de la página, como si la capa que las contiene no tubiera fondo[...]

mmm... Yo recuerdo haberme topado con un problema similar... y realmente es como si no se calculase bien la altura de la capa, y por tanto no muestra el fondo... Creo recordar que había que limpiar el float antes de que terminara la propia capa... o meterle alto fijo, o display:block

Es una de estas tres. Ahora no recuerdo bien.

[scrolling]

Gracias, pero no logro que se muestre bien.

El estilo de las capas es:

Código:

#centro { //capa contenedora
	background: url(../imagenes/centro.png) repeat-y;
	width: 1000px;
	margin: auto;
	text-align: left;
}

#secciones { //capa que está dentro de "#centro" y a la izquierda
	padding: 0 20px 0 20px;
	width: 660px;
	float: left;
}

#enlaces { //capa que está dentro de "#centro", pero a la derecha
	border-left: 1px #DDD dotted;
	float: right;
	padding: 0 20px 0 20px;
	width: 259px;
} 

Las capas están acomodadas así:

Código:

<div id="centro">
    <div id="secciones">
        <p>secciones</p>seccion1<p>seccion 2</p> seccion 3
    </div>
    <div id="enlaces">
        enlaces
    </div>
</div>

los estilos los pongo en colores porque tengo un pequeño diagrama de la página:



Y así se "debería" de ver (o por lo menos eso creo):



Como ven, la capa contenedora tiene el fondo, pero solo se ve ese fondo en Internet Explorer, en Firefox, Opera y Safari no lo muestra y se "salta" hasta el fondo de la página (el degradado gris).

Ya intente con el display:block, con un alto y ancho fijos, incluso con el clear:both (aunque no tiene mucho que ver, porque 'clear' sirve para otra cosa), pero bueno, ya lo intenté y no lo logro.

Alguna idea? :(

Saludos!

[juaniquillo]

Los elementos padres colapsan cuando uno de sus hijos tiene un float. Lee este mensaje:
http://www.forosdelweb.com/f53/div-q...l-todo-553102/

[scrolling]

Ahhh cierto, ahora sí funcionó, gracias!!

Saludos!

[safe]

mmm.. no se que tan recomendable es poner overflow:auto; para solucionar este problema (yo lo he usado y en ciertas ocasiones y en ciertos navegadores aparece indeseadamente la barra de scroll).
La solucion que yo creo mas recombable es la de simplemente flotar el elemento padre. Eso si, seguramente deberas asignarle un ancho para que quede con el temaño deseado.

[juaniquillo]

Esa es otra buena solución pero que también depende del situación. Hay veces que eso causa mas problemas de lo que resuelve.