Problema Con FF y Opera... pero no con explorer

stardust · #1 (**permalink**) 05/05/2006, 18:52

Hola!
Vereis: quiero conseguir que la capa "cuerpo" encierre (creando una caja roja) a todas las capas que estén por debajo suya. Este es el archivo css:

Código:

#principal {
		background-color:#E6E4D0;
  		margin-top:4px;
  		float:right;
		width: 625px;
		height:200px;
		margin-bottom: 10px;
		margin-right: 10px;
		border: 2px solid #D0CEAC;
		display:block;
}

#cuerpo {
		border: 2px solid #D0CEAC;
        background-color:#FF0000;
     	display:block;
 		position: relative;
		width: 800px;
		margin-left: auto;
		margin-right: auto;
		margin-top: 0px;
		margin-bottom: 0px;
}

y el html:

Código:

<html>
<head>
<link href="estilo.css" rel="stylesheet" type="text/css">
<title>Prueba AML</title>
</head>
<body>
	<div id="cuerpo">		
		<div id="principal">
		</div>	
	</div>
</body>
</html>

El problema es que ni FF ni Opera lo representan correctamente: crean una caja vacía y por debajo de ella muestran la capa principal. Sin embargo Explorer sí que crea la caja roja (lo que me hace sospechar que es problema del código).
Os agradeceria que pudiérais echar un ojo al código para ver si véis que está mal.

Muchas gracias!

all-ill · #2 (**permalink**) 05/05/2006, 19:10

Puedes hacerlo especificando el height o min-height del estilo para el cuerpo.

Ej. min-height:250px;

Probablemente hay soluciones más adecuadas (que se adapten según el contenido). A ver si alguien te da una mejor solución.

frijolerou · #3 (**permalink**) 05/05/2006, 20:34

El problema es el siguiente: #principal es un elemento flotante (float:right). Y por el hecho de ser un elemento flotante no condiciona la altura de su contenedor #cuerpo (salvo en IE). Lo que tienes que hacer es aplicarle a #cuerpo la propiedad overflow:hidden. Eso permitirá que #cuerpo se redimensione según la cantidad de contenido que pueda llegar a tener #principal.

all-ill · #4 (**permalink**) 06/05/2006, 01:41

y llegó la respuesta!!

frijolerou

Salu2

stardust · #5 (**permalink**) 06/05/2006, 10:13

Muchisimas gracias!
Funciona al 100%!!