Foros del Web » Creando para Internet » CSS »

div A contiene a div B, pero altura de div A < altura div B

Estas en el tema de div A contiene a div B, pero altura de div A < altura div B en el foro de CSS en Foros del Web. Me explico, tengo un div llamado "vacio" que contiene div izda y div drcha. Pero el div "vacio" tiene una altura de 0 por defecto ...
  #1 (permalink)  
Antiguo 04/10/2006, 12:23
 
Fecha de Ingreso: septiembre-2006
Mensajes: 15
Antigüedad: 11 años, 2 meses
Puntos: 0
div A contiene a div B, pero altura de div A < altura div B

Me explico, tengo un div llamado "vacio" que contiene div izda y div drcha. Pero el div "vacio" tiene una altura de 0 por defecto (menos en IE). Lo que quiero y no se hacer es que este div "vacio", tenga la altura de izda o drcha (la que sea mas grande), es decir, que se ajuste a su altura, ya que es el que los contiene.

Con el código se entiende más. Si lo ponemos en internet explorer, se ve una capa verde que es el contenedor, pero en firefox y opera no se ve, mi pregunta es... ¿cómo hago que esa capa se vea en todos los navegadores?

De ie no me fio pq todos sabemos q hace lo que quiere...

¿Alguna idea que no sea poner un height: xxx px; a "vacio"?

Gracias

Código:
Cita:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}

#izda {
float: left;
width: 471px;
background-color: red;
}
#vacio {
width: 100%;
background-color: green;
}
#drcha{
float: right;
width: 124px;
background-color: blue;
}
#abajo{
position: relative;
background-color: #e1e1e1;
clear: left;
}
#arriba{
background-color: #FF00FF;
}
</style>
</head>
<body>
<div id="container">
<div id="arriba">capa de arriba</div>
<div id="vacio">
<div id="izda">aaa</div>
<div id="drcha">ccc</div>
</div>
</div>
<div id="abajo">caca culo pedo pis</div>
</body>
</html>

Última edición por Clandes; 04/10/2006 a las 12:29
  #2 (permalink)  
Antiguo 04/10/2006, 12:46
Avatar de Carxl
Colaborador
 
Fecha de Ingreso: agosto-2006
Ubicación: Bogotá
Mensajes: 2.993
Antigüedad: 11 años, 4 meses
Puntos: 70
No hay necesidad

Hi

Para que tu capa "vacio" tome el alto de la capa mas grande de las que contiene, pues no le coloques altura, no la menciones... o si quieres sin embargo mencionarla ponle margin:auto

Saludos
  #3 (permalink)  
Antiguo 04/10/2006, 12:48
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
Abajo de <div id="drcha">ccc</div> ponés un <hr /> o un <br style="clear:both" />

Creo que eso te lo soluciona
__________________
...___...
  #4 (permalink)  
Antiguo 04/10/2006, 12:51
 
Fecha de Ingreso: septiembre-2006
Mensajes: 15
Antigüedad: 11 años, 2 meses
Puntos: 0
si no pongo altura... en firefox y opera pone 0, y eso del clear both... no es el problema, ya está hecho, tampoco va :(
  #5 (permalink)  
Antiguo 04/10/2006, 12:54
 
Fecha de Ingreso: septiembre-2006
Mensajes: 15
Antigüedad: 11 años, 2 meses
Puntos: 0
Gracias por las respuestas, pero no funciona ninguna, comprobadlo vosotros mismos ;) (en firefox o opera), internet explorer si que lo hace sin ponerle nada.
  #6 (permalink)  
Antiguo 04/10/2006, 18:15
 
Fecha de Ingreso: diciembre-2003
Mensajes: 1.583
Antigüedad: 14 años
Puntos: 13
Cuando tienes elementos flotantes dentro de un contenedor, a éste último debes aplicarle overflow:hidden.
  #7 (permalink)  
Antiguo 04/10/2006, 18:29
 
Fecha de Ingreso: septiembre-2006
Mensajes: 15
Antigüedad: 11 años, 2 meses
Puntos: 0
Cita:
Iniciado por frijolerou Ver Mensaje
Cuando tienes elementos flotantes dentro de un contenedor, a éste último debes aplicarle overflow:hidden.
Muchisimas gracias, era esto ;)
  #8 (permalink)  
Antiguo 05/10/2006, 10:10
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
Sólo por curiosidad. Yo probé lo de colocar un br con clear:both y funcionó.
¿Cuál es la diferencia entre un método y otro?

Saludos

Edit: una que se me ocurre es que al colocar un br estás metiendo html innecesario
__________________
...___...
  #9 (permalink)  
Antiguo 05/10/2006, 11:08
 
Fecha de Ingreso: septiembre-2006
Mensajes: 15
Antigüedad: 11 años, 2 meses
Puntos: 0
Cita:
Iniciado por Al Zuwaga Ver Mensaje
Sólo por curiosidad. Yo probé lo de colocar un br con clear:both y funcionó.
¿Cuál es la diferencia entre un método y otro?

Saludos

Edit: una que se me ocurre es que al colocar un br estás metiendo html innecesario
Lo del br t hace la capa vacio de altura una linea, pero que pasa si las capas izda y dr ocupan 10? vacio sigue teniendo 1 linea (la del br).
  #10 (permalink)  
Antiguo 05/10/2006, 12:58
 
Fecha de Ingreso: abril-2005
Ubicación: Lima-Peru
Mensajes: 313
Antigüedad: 12 años, 7 meses
Puntos: 1
Yo tengo entendido que un div clearer, lo que hace es empujar el contenido hacia abajo para que no se vea desfasado
  #11 (permalink)  
Antiguo 05/10/2006, 13:24
 
Fecha de Ingreso: diciembre-2003
Mensajes: 1.583
Antigüedad: 14 años
Puntos: 13
Aquí encontré el link con una explicación para el método del overflow.

Al zugawagawa: exactamente, usar un BR con la propiedad clear implica recurrir a elementos html innecesarios, igual cuando usan DIV's vacíos con la propiedad clear, etc.
  #12 (permalink)  
Antiguo 05/10/2006, 16:24
 
Fecha de Ingreso: septiembre-2006
Mensajes: 15
Antigüedad: 11 años, 2 meses
Puntos: 0
Cita:
Iniciado por MaXaC Ver Mensaje
Yo tengo entendido que un div clearer, lo que hace es empujar el contenido hacia abajo para que no se vea desfasado
si, pero la cuestion era que la capa vacio ocupe la misma altura q la mayor de las q contiene ;)
  #13 (permalink)  
Antiguo 05/10/2006, 17:01
 
Fecha de Ingreso: diciembre-2003
Mensajes: 1.583
Antigüedad: 14 años
Puntos: 13
Un ejemplo:

Código HTML:
<div contenedor>
    <div flotante izquierda>
    <div flotante derecha>
</div contenedor> 
Si lo dejamos tal cual, los dos elementos flotantes se saldrán del flujo de contenido del elemento contenedor, y por lo tanto, la altura de este último no se verá afectada por la altura de los flotantes.

Una solución a eso es agregar al final un elemento con la propiedad clear. Según el valor de esta propiedad, los elementos flotantes "empujarán" al elemento siguiente. Como este elemento sí se encuentra dentro del flujo de contenido del contenedor, obviamente al moverse hará crear al contenedor:

Código HTML:
<div contenedor>
    <div flotante izquierda>
    <div flotante derecha>
    <div clear>
</div contenedor> 
El problema de esto es que te obliga a incluir un elemento innecesario (en este caso un DIV vacío). Entonces podemos lograr el mismo efecto aplicando la propiedad overflow (como hidden) al contenedor:

Código HTML:
<div contenedor con overflow>
    <div flotante izquierda>
    <div flotante derecha>
</div contenedor> 
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 11:26.