Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Funciona en FF, IE, Opera, no en Netscape! float:left y alto del contenedor en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 09/01/2006, 08:09
Avatar de Escoffie  
Fecha de Ingreso: abril-2003
Ubicación: Mérida, Yucatán
Mensajes: 242
Antigüedad: 14 años, 7 meses
Puntos: 9
Funciona en FF, IE, Opera, no en Netscape! float:left y alto del contenedor

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
  #2 (permalink)  
Antiguo 09/01/2006, 09:02
Avatar de Escoffie  
Fecha de Ingreso: abril-2003
Ubicación: Mérida, Yucatán
Mensajes: 242
Antigüedad: 14 años, 7 meses
Puntos: 9
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.
  #3 (permalink)  
Antiguo 09/01/2006, 09:15
Avatar de Escoffie  
Fecha de Ingreso: abril-2003
Ubicación: Mérida, Yucatán
Mensajes: 242
Antigüedad: 14 años, 7 meses
Puntos: 9
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.
  #4 (permalink)  
Antiguo 09/01/2006, 09:46
Avatar de vites  
Fecha de Ingreso: agosto-2005
Ubicación: Lugar en el que esta ubicado algo
Mensajes: 58
Antigüedad: 12 años, 3 meses
Puntos: 0
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
  #5 (permalink)  
Antiguo 09/01/2006, 09:55
Avatar de Escoffie  
Fecha de Ingreso: abril-2003
Ubicación: Mérida, Yucatán
Mensajes: 242
Antigüedad: 14 años, 7 meses
Puntos: 9
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
  #6 (permalink)  
Antiguo 09/01/2006, 10:13
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 12 años, 7 meses
Puntos: 0
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.
  #7 (permalink)  
Antiguo 09/01/2006, 10:27
Avatar de Escoffie  
Fecha de Ingreso: abril-2003
Ubicación: Mérida, Yucatán
Mensajes: 242
Antigüedad: 14 años, 7 meses
Puntos: 9
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.
  #8 (permalink)  
Antiguo 09/01/2006, 10:30
Avatar de vites  
Fecha de Ingreso: agosto-2005
Ubicación: Lugar en el que esta ubicado algo
Mensajes: 58
Antigüedad: 12 años, 3 meses
Puntos: 0
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
  #9 (permalink)  
Antiguo 09/01/2006, 10:32
Avatar de Escoffie  
Fecha de Ingreso: abril-2003
Ubicación: Mérida, Yucatán
Mensajes: 242
Antigüedad: 14 años, 7 meses
Puntos: 9
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
  #10 (permalink)  
Antiguo 09/01/2006, 11:16
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 12 años, 7 meses
Puntos: 0
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.
  #11 (permalink)  
Antiguo 09/01/2006, 16:02
Avatar de Escoffie  
Fecha de Ingreso: abril-2003
Ubicación: Mérida, Yucatán
Mensajes: 242
Antigüedad: 14 años, 7 meses
Puntos: 9
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.
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 17:17.