Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de ¿Como hago que una div adapte automáticamente la altura conteniendo elementos float? en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 11/04/2009, 12:45
 
Fecha de Ingreso: septiembre-2006
Mensajes: 19
Antigüedad: 11 años, 2 meses
Puntos: 0
¿Como hago que una div adapte automáticamente la altura conteniendo elementos float?

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.
  #2 (permalink)  
Antiguo 11/04/2009, 13:02
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: ¿Como hago que una div adapte automáticamente la altura conteniendo elemen

Hola:

Quizá te sirva este ejemplo.

Saludos.

  #3 (permalink)  
Antiguo 11/04/2009, 13:06
 
Fecha de Ingreso: septiembre-2006
Mensajes: 19
Antigüedad: 11 años, 2 meses
Puntos: 0
Respuesta: ¿Como hago que una div adapte automáticamente la altura conteniendo elemen

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.
  #4 (permalink)  
Antiguo 11/04/2009, 13:09
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: ¿Como hago que una div adapte automáticamente la altura conteniendo elemen

Hola de nuevo:

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

Saludos.

  #5 (permalink)  
Antiguo 11/04/2009, 18:08
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
Respuesta: ¿Como hago que una div adapte automáticamente la altura conteniendo elemen

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
__________________
Al final del día hablar es gratis, codificar no lo es
  #6 (permalink)  
Antiguo 11/04/2009, 22:22
 
Fecha de Ingreso: septiembre-2006
Mensajes: 19
Antigüedad: 11 años, 2 meses
Puntos: 0
Respuesta: ¿Como hago que una div adapte automáticamente la altura conteniendo elemen

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.

Última edición por artek; 11/04/2009 a las 22:27
  #7 (permalink)  
Antiguo 11/04/2009, 22:50
 
Fecha de Ingreso: diciembre-2005
Mensajes: 97
Antigüedad: 12 años
Puntos: 0
Respuesta: ¿Como hago que una div adapte automáticamente la altura conteniendo elemen

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>
__________________
_Derek_
  #8 (permalink)  
Antiguo 12/04/2009, 21:21
 
Fecha de Ingreso: septiembre-2006
Mensajes: 19
Antigüedad: 11 años, 2 meses
Puntos: 0
Respuesta: ¿Como hago que una div adapte automáticamente la altura conteniendo elemen

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.

Última edición por artek; 13/04/2009 a las 00:22 Razón: cambio de la palabra "utilizada" por la palabra "recomendada"
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 16:54.