Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Problema Con FF y Opera... pero no con explorer en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 05/05/2006, 19:52
 
Fecha de Ingreso: mayo-2006
Ubicación: Madrid
Mensajes: 153
Antigüedad: 11 años, 7 meses
Puntos: 3
Problema Con FF y Opera... pero no con explorer

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!
  #2 (permalink)  
Antiguo 05/05/2006, 20:10
 
Fecha de Ingreso: junio-2002
Mensajes: 751
Antigüedad: 15 años, 6 meses
Puntos: 22
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.
  #3 (permalink)  
Antiguo 05/05/2006, 21:34
 
Fecha de Ingreso: diciembre-2003
Mensajes: 1.583
Antigüedad: 14 años
Puntos: 13
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.
__________________
El conocimiento es libre: Movimiento por la Devolución
  #4 (permalink)  
Antiguo 06/05/2006, 02:41
 
Fecha de Ingreso: junio-2002
Mensajes: 751
Antigüedad: 15 años, 6 meses
Puntos: 22
y llegó la respuesta!!
frijolerou

Salu2
  #5 (permalink)  
Antiguo 06/05/2006, 11:13
 
Fecha de Ingreso: mayo-2006
Ubicación: Madrid
Mensajes: 153
Antigüedad: 11 años, 7 meses
Puntos: 3
Muchisimas gracias!
Funciona al 100%!!
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:48.