Funciona en FF, IE, Opera, no en Netscape! float:left y alto del contenedor

Escoffie · #1 (**permalink**) 09/01/2006, 08:09

Hola foreros:

Pues eso, tengo un div contenedor que adentro tiene como 20 divs pequeños con float:left, la idea es que el contenedor crezca haca abajo para "enmarcar" a todos los divs pequeños que forman varias filas.

Todo va de maravilla en Firefox, Opera, Safari y hasta en Explorer!!! pero por alguna razón que escapa a mi entenidmiento, en Netscape 7 no le da la gana de funcionar.

Ya hice mil pruebas, con hacks y sin ellos y lo único que logré fue aprender otras 6 formas de obtener el mismo resultado, pero con más código

He aquí el CSS que estoy usando:

Código:

#contenedor{
	border-left:1px solid #CCCCCC;
	border-right:1px solid #CCCCCC;
	border-bottom:1px solid #CCCCCC;
	margin-left:151px;
	padding:10px;
	background:#FAFAFA;
	overflow:hidden;
	height:100%; 
}
#contenedor #flotantes{
	width:100px;
	height:200px; 
	border:1px solid #CCCCCC;
	margin-right:5px;
	margin-bottom:5px;
	padding:5px;
	background-color:#FFFFFF;
	float:left;
}

El HTML sería algo así:

Código HTML:

<div id="contenedor">
<div id="flotantes">Contenido de muestra</div>
<div id="flotantes">Contenido de muestra</div>
<div id="flotantes">Contenido de muestra</div>
<div id="flotantes">Contenido de muestra</div>
<div id="flotantes">Contenido de muestra</div>
<div id="flotantes">Contenido de muestra</div>
<div id="flotantes">Contenido de muestra</div>
<div id="flotantes">Contenido de muestra</div>
<div id="flotantes">Contenido de muestra</div>
<div id="flotantes">Contenido de muestra</div>
<div id="flotantes">Contenido de muestra</div>
<div id="flotantes">Contenido de muestra</div>
<div id="flotantes">Contenido de muestra</div>
<div id="flotantes">Contenido de muestra</div>
<div id="flotantes">Contenido de muestra</div>
<div id="flotantes">Contenido de muestra</div>
</div>

Reitero, funciona bien en todos lados, menos en Netscape.
¿Alguna vez habían oído algo así?

Saludos y de antemano, gracias

Escoffie · #2 (**permalink**) 09/01/2006, 09:02

Una pista más:

En el estilo para el DIV contenedor está puesto overflow:hidden.
Si lo quito, Firefox, Opera y Netscape funcionan igual, pero sólo Explorer hace lo que quiero que haga, pues en los demás el contenedor no crece para encerrar los divs flotantes.

Por aquí en algún post vi el truco del overflow:hidden para que sí encierre en Mozilla y familia, pero Netscape se rehusa a hacerlo.

Gracias y saludos.

Escoffie · #3 (**permalink**) 09/01/2006, 09:15

Una pista más:

Le cambié el overflow:hidden por overflow:auto y ahora en todos hace lo que yo quiero, pero en Netscape aparece una barra de Scroll.
Al menos elcontenido ya no está oculto y se ve relativamente decente, pero si a alguien se le ocurre una solución, bienvenida.

vites · #4 (**permalink**) 09/01/2006, 09:46

hummm... no se si es desto pero pruebalo

el id es un identificador unico de cada elemento, por lo tanto solo un elemento deveria de llevar el id, si tienes mas de un elemento que lleva el mismo estilo utiliza class

yo acabo de probar este codigo y si funciona

Código HTML:

<html>

	<head>

		<style type="text/css" media="all">
#contenedor{
	background-color : rgb(255, 255, 255);
	border-left:1px solid #CCCCCC;
	border-right:1px solid #CCCCCC;
	border-bottom:1px solid #CCCCCC;
	margin-left:151px;
	padding:10px;
	overflow:hidden;
	height:100%; 
}
#contenedor .flotantes{
	width:100px;
	height:200px; 
	border:1px solid #CCCCCC;
	margin-right:5px;
	margin-bottom:5px;
	padding:5px;
	background-color:#FFFFFF;
	float:left;
}
		</style>


	</head>

	<body>

<div id="contenedor">
 <div class="flotantes">Contenido de muestra</div>
 <div class="flotantes">Contenido de muestra</div>
 <div class="flotantes">Contenido de muestra</div>
 <div class="flotantes">Contenido de muestra</div>
 <div class="flotantes">Contenido de muestra</div>
 <div class="flotantes">Contenido de muestra</div>
 <div class="flotantes">Contenido de muestra</div>
 <div class="flotantes">Contenido de muestra</div>
 <div class="flotantes">Contenido de muestra</div>
 <div class="flotantes">Contenido de muestra</div>
 <div class="flotantes">Contenido de muestra</div>
 <div class="flotantes">Contenido de muestra</div>
 <div class="flotantes">Contenido de muestra</div>
 <div class="flotantes">Contenido de muestra</div>
 <div class="flotantes">Contenido de muestra</div>
 <div class="flotantes">Contenido de muestra</div>
</div>

	</body>

</html>

no deveria ser de eso, pero nunca se sabe lo quisquillosos que pueden llegar a ser los exploradores

Escoffie · #5 (**permalink**) 09/01/2006, 09:55

Hola vites, gracias por tu respuesta.

Aunque ahora gracias a ti mi código es más estándar por aquello de no duplicar ids, el resultado fue exactamente el mismo.

El problema que tengo es que en Netscape, el div contenedor no se estira en su altura para enmarcar a los divs flotantes, sino que los divs flotantes se "derraman" fuera del contenedor. Usando overflow:hidden o auto el problema cambia, ahora se "esconden" dentro de un contenedor de altura fija que no se adapta a la cantidad de divs flotantes.

Saludos y muchas gracias, feliz 2006

RoQ · #6 (**permalink**) 09/01/2006, 10:13

los hijos no hacen crecer al padre porque estan flotando, el "overflow:hidden" al parecer esta haciendo que firefox opera y otros hagan eso pero no deberian, prueba poner debajo del ultimo div flotante

Código HTML:

<div id="contenedor">
...
<div class="flotantes">Contenido de muestra</div>
<br style="clear:both" />
</div>

y "flotantes" deberia se una clase no un id, el <br> lo que hara sera limpiar el flujo y el contenedor crecera, aunque no es una solucion muy semantica que digamos.

Escoffie · #7 (**permalink**) 09/01/2006, 10:27

Muchas gracias RoQ!!!!

Funcionó de maravilla. Ahora se ve perfecto en todos.
Si no es abusar de tu gentileza, me podrías explicar porqué funciona con el clear:both??? jamás se me hubiera ocurrido.

Saludos y mil gracias.

vites · #8 (**permalink**) 09/01/2006, 10:30

La propiedad clear especifica si un elemento permite elementos flotantes a sus lados. Un valor left mueve el elemento debajo de cualquier elemento flotante a su izquierda; right actúa en forma similar para elementos flotantes a la derecha. Otros valores son none, que es el valor inicial, y both, que mueve el elemento debajo de los elementos flotantes a ambos lados.

a mi tampoco se me abria ocurrido

Escoffie · #9 (**permalink**) 09/01/2006, 10:32

Gracias Vites. Sigue sin quedarme del todo claro, pero ya lo añadí a mi lista de truquitos raros, jeje.
Muchas gracias a los dos

RoQ · #10 (**permalink**) 09/01/2006, 11:16

excelente explicacion vites, para aclararlo te dire Escoffie que si tu le pones a un elemento "float" este pues va a "flotar" por lo cual el div que lo contiene no va a crecer (tampoco deberia) y el clear hace que el br no permita elementos flotantes a sus lados lo cual obliga al padre a crecer para contenerlo.
Otra cosa es que este asunto del float se ha tratdo un monton de veces y casi cada post que tiene problemas con el float es por este caso.

Escoffie · #11 (**permalink**) 09/01/2006, 16:02

Hola RoQ, ya con eso me queda bastante claro, muchas gracias

Efectivamente hay muchos posts al respecto y de algunos de ellos logré que se viera decente en todos menos Netscape, pero esta solución que me comentas fue magnífica. Mil gracias.