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

Clandes · #1 (**permalink**) 04/10/2006, 11:23

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>

Carxl · #2 (**permalink**) 04/10/2006, 11:46

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

AlZuwaga · #3 (**permalink**) 04/10/2006, 11:48

Abajo de <div id="drcha">ccc</div> ponés un <hr /> o un <br style="clear:both" />

Creo que eso te lo soluciona

Clandes · #4 (**permalink**) 04/10/2006, 11:51

si no pongo altura... en firefox y opera pone 0, y eso del clear both... no es el problema, ya está hecho, tampoco va :(

Clandes · #5 (**permalink**) 04/10/2006, 11:54

Gracias por las respuestas, pero no funciona ninguna, comprobadlo vosotros mismos ;) (en firefox o opera), internet explorer si que lo hace sin ponerle nada.

frijolerou · #6 (**permalink**) 04/10/2006, 17:15

Cuando tienes elementos flotantes dentro de un contenedor, a éste último debes aplicarle overflow:hidden.

Clandes · #7 (**permalink**) 04/10/2006, 17:29

Cita:

Iniciado por frijolerou

Cuando tienes elementos flotantes dentro de un contenedor, a éste último debes aplicarle overflow:hidden.

Muchisimas gracias, era esto ;)

AlZuwaga · #8 (**permalink**) 05/10/2006, 09:10

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

Clandes · #9 (**permalink**) 05/10/2006, 10:08

Cita:

Iniciado por Al Zuwaga

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).

MaXaC · #10 (**permalink**) 05/10/2006, 11:58

Yo tengo entendido que un div clearer, lo que hace es empujar el contenido hacia abajo para que no se vea desfasado

frijolerou · #11 (**permalink**) 05/10/2006, 12:24

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.

Clandes · #12 (**permalink**) 05/10/2006, 15:24

Cita:

Iniciado por MaXaC

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 ;)

frijolerou · #13 (**permalink**) 05/10/2006, 16:01

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>