¿Como hago que una div adapte automáticamente la altura conteniendo elementos float?

artek · #1 (**permalink**) 11/04/2009, 11:45

Por ejemplo,

En html:

<div class="contenedor-generico">
<div class="contenedor-discos">
</div>
</div>

En css:

.contenedor-generico{
width:900px;
background-color:#090909;
padding:10px;
margin-bottom:30px;
}

.contenedor-discos{
width:200px;
height:200px;
float:left;
}

Lo que quiero es que el div con la clase "contenedor-generico" adapte automáticamente su altura según la cantidad de divs con la clase "contenedor-discos" que contenga ¿Me explico?

De la forma que lo planteo lo que sucede es que la altura de "contenedor-generico" queda fija, temporalmente lo estoy solucionando definiendo una altura adecuada a "contenedor-generico" que se adapte a la cantidad de "contenedor-discos" que contenga.

Desde ya, muchas gracias.
Artek.

jomaruro · #2 (**permalink**) 11/04/2009, 12:02

Hola:

Quizá te sirva este ejemplo.

Saludos.

artek · #3 (**permalink**) 11/04/2009, 12:06

No me sirve el ejemplo ya que los párrafos que agrega no son elementos flotantes, por lo tanto la div ahí sí se adapta al contenido.

Muchas gracias de todas formas.

jomaruro · #4 (**permalink**) 11/04/2009, 12:09

Hola de nuevo:

Lo siento, si encuentro otra cosa te lo indicaré.

Saludos.

baccxus · #5 (**permalink**) 11/04/2009, 17:08

Y que es lo que quieres hacer exactamente?

De pronto estás planteando una solución a tu problema y no te has planteado que otras posibles soluciones pueden haber. Pon un ejemplo en un dibujo o una web de muestras o algo por el estilo.

Saludos

artek · #6 (**permalink**) 11/04/2009, 21:22

No, no, no nos compliquemos, pensé que era simple de entender.
He subido una muestra a chocolatedonas.brinkster[punto]net
Con firebug se aprecia perfectamente.

Gracias.

pavelinhos · #7 (**permalink**) 11/04/2009, 21:50

hola yo aumentaria esto:
en el css:

Código:

@charset "utf-8";
/* CSS Document */

.contenedor-generico{
width:900px;
background-color:#090909;
padding:10px;
margin-bottom:30px;
}

.contenedor-discos{
width:180px;
height:180px;
float:left;
background-color: #CC6600;
margin:20px;
}
.ajustar{
clear:both;
}

en el html:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>

<body>

<div class="contenedor-generico">

	<div class="contenedor-discos">
	</div>

	<div class="contenedor-discos">
	</div>
	<div class="contenedor-discos">
	</div>
	<div class="contenedor-discos">
	</div>
	<div class="contenedor-discos">
	</div>
    
	<div class="ajustar"></div>

</body>
</html>

artek · #8 (**permalink**) 12/04/2009, 20:21

Genial, ha funcionado, anidando ese otro div con el clear:both, el principal adapta la altura sin problemas (FF, IE 6 y 7, Chrome)

Dejo la solución aquí:
chocolatedonas.brinkster[punto]net/solucionado/

¿Esta será esta la solución más recomendada?

Muchas gracias!
Keep developing.