Problema de float con galeria en CSS

K3NNY · #1 (**permalink**) 07/08/2005, 10:43

Me encontre con este tutorial para hacer una galeria de fotos con CSS, y funciona barbaro, porque al flotar las imagenes si redimenciono la pagina las imagenes se autoacomodan en varias lineas, etc. Pero mi problema recide en que necesito poner un div con un texto abajo de la galeria, pero al estar las imagenes flotando no ocupan espacio, por lo que el div se mete debajo de las imagenes o a un costado (segun el navegador). Entonces, como puedo hacer para conservar el float de las imagenes pero que ocupen el espacio que deberian ocupar?

El tutorial: http://worlds.cpsimoes.net/f-worlds_...egallery.shtml
El resultado final: http://cb2web.com/tests/gallery/gallery.htm

Desde ya muchas gracias.

damianx · #2 (**permalink**) 07/08/2005, 20:17

Hola, probaste utilizando la propiedad clear?
de esta forma:

Código:

<div style="clear:both">
texto texto texto texto texto 
</div>

Saludos!

K3NNY · #3 (**permalink**) 08/08/2005, 13:50

Caaapoooooo!!! Funciona de maravillas.

PD: Sos groso, sabelo!

K3NNY · #4 (**permalink**) 12/08/2005, 15:41

Tengo otro problema. La galeria funciona barbara por si sola, pero cuando la meto dentro de un div posicionado relativamente no se ve en IE. Osea, en IE la galeria queda debajo del div que lo contiene (el cual tiene un color de fondo, por lo que tapa la galeria)

Código:

<html>
<head>
	<title>Thumbnails Gallery</title>
	<style type="text/css">
	<!--
		#thumbnail dl {
			border: 1px solid #f90;
			width: 170px;
			padding: 10px;
			margin-right: 10px;
			background-color: #fc0;
			float: left;
			}
		#content {
			position: relative;
			width: auto;
			background-color: #fc3;
			}
	-->
</style>
</head>
<body>
	<div id="content">
		<div id="thumbnail">
			<dl>
  				<dt><img src="image1_thumb.jpg" width="160" height="120" /></dt>
  				<dd><a href="image1.jpg">Image 1</a></dd>
			</dl>
			<dl>
  				<dt><img src="image2_thumb.jpg" width="160" height="120" /></dt>
  				<dd><a href="image2.jpg">Image 2</a></dd>
			</dl>
			<dl>
		  		<dt><img src="image3_thumb.jpg" width="160" height="120" /></dt>
  				<dd><a href="image3.jpg">Image 3</a></dd>
			</dl>
		<div style="clear:both">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed felis metus, egestas sed, vulputate vitae, vestibulum eget, leo. Phasellus fringilla mi vitae lectus. Nam eu magna. Nullam vel tellus. Praesent bibendum. Fusce sit amet erat sit amet augue pulvinar placerat. Praesent porttitor magna a metus. Nullam magna arcu, convallis eu, tempus eget, volutpat non, enim. Donec sem ante, semper quis, aliquet eu, sollicitudin id, magna. Sed ut tellus.
		</div>
	</div>
</body>
</html>

Miren el codigo en Firefox o Opera y despues en IE y van a ver lo que quiero decir (prueben sacarle el color de fondo al div #content")

Alguien sabe porque pasa esto?

K3NNY · #5 (**permalink**) 13/08/2005, 12:33

Perdon por levantar el tema, pero probe poniendoles z-index a cada div pero parece no afectarle. Alguien tiene idea siquiera de como se llama este bug de IE?

K3NNY · #6 (**permalink**) 13/08/2005, 12:44

LO ENCONTRE. Definitivamente es un bug de IE, sigo sin saber como se llama pero encontre la solucion. La solucion consiste en posicionar relativamente el objeto a flotar, y luego flotarlo. En el ejemplo que postie antes, el CSS del div a flotar quedaria asi:

Código:

		#thumbnail dl {
			border: 1px solid #f90;
			width: 170px;
			padding: 10px;
			margin-right: 10px;
			background-color: #fc0;
			position: relative;
			float: left;
			}

K3NNY · #7 (**permalink**) 13/08/2005, 12:45

LO ENCONTRE. Definitivamente es un bug de IE, sigo sin saber como se llama pero encontre la solucion. La solucion consiste en posicionar relativamente el objeto a flotar, y luego flotarlo. En el ejemplo que postie antes, el CSS del div a flotar quedaria asi:

Código:

		#thumbnail dl {
			border: 1px solid #f90;
			width: 170px;
			padding: 10px;
			margin-right: 10px;
			background-color: #fc0;
			position: relative;
			float: left;
			}

Al que le interese, llegue a esta solucion poniendo esto en Yahoo: ie+bug+float+absolute (4 resultado)

JJRC · #8 (**permalink**) 16/08/2005, 15:56

Yo también tengo un problema con este maldito IE y float.

Resulta que tengo una tabla y dentro de ella un float que en firefox se ve dentro de la tabla y en IE se sobresale.

¿Alguien sabe como puedo corregir eso?

K3NNY · #9 (**permalink**) 16/08/2005, 16:30

Proba poniendo un abjeto abajo del float (osea, a continuacion) que tenga un "clear" en la misma direccion que el float. Por ejemplo...

<div style="float:left;">Lorem Ipsum</div>
<div style="clear:left;"> </div>

...cualquier duda pregunta. ;)

JJRC · #10 (**permalink**) 16/08/2005, 21:45

Cita:

Iniciado por K3NNY

Proba poniendo un abjeto abajo del float (osea, a continuacion) que tenga un "clear" en la misma direccion que el float. Por ejemplo...

<div style="float:left;">Lorem Ipsum</div>
<div style="clear:left;"> </div>

...cualquier duda pregunta. ;)

Sos un capo k3nny!!!

Avisame donde te mando la pizza.