Autoajuste con Float

[bazanmarcelo]

Hola. Les comento lo que trato de hacer:

Tengo 1 DIV contenedor y un script PHP que me devuleve un DIV por cada imágen que hay en una BD.
Cada DIV tiene float a la izquierda y luego de varios foros, logré que el DIV contenedor se centre y se ajuste al tamaño total de los DIVs.

Pero, y acá está lo jodido, eso va bien porque mi resolucion es 1600x900, pero si redimensiono el browser y uno de los DIVs con float a la izquierda baja, me deja un hueco ya que el DIV contenedor no se autoajusta y se centra de nuevo, por lo que la página deja de estar centrada en su contenido.

¿hay alguna forma de que el DIV contenedor se autoajuste cuando algun hijo con float baja de línea?.

Gracias.

Marcelo.

[seravifer]

No he entendido muy bien cual es tu problema, seria mejor que nos pasaras la web.

[bazanmarcelo]

Yol o haría pero no esta subida:

Te lo explico mejor: Tenes un DIV contenedor de ancho variable y dentro supongamos 4 DIVs de ancho fijo, digamos 150px con todo y margin (en realidad pueden ser menos o mas porque es dinámico).
Ahora, si la pantalla es de 700px no pasa nada porque 150x4 son 600, sobran 100, pero si achico la pantalla a, digamos, 550px, 3 van a entrar (serían 450px, pero el 4to al no entrar y tener float left se va abajo y con eso me sobrarían 100px, y esos 100px el DIV contenedor no se los autoajusta, entonces me quedan 3 DIVs pegados a la izquierda y un espacio de 100px vacio a la derecha.
El tema sería encontrar una forma de que el DIV se ajuste y se queda en 450px (para este caso de ejemplo que te di) o lo que sea necesario en caso real.

Espero que se entienda mejor

Acá te va una imágen (vale mas que mil palabras)



Gracias.

Marcelo.

[flashmax]

Hola prueba quitando el ancho al div contenedor y agregale

height:auto;
overflow:hidden;
display:inline-block;

[bazanmarcelo]

Hola flashmax.

Gracias por tu consejo, pero no, ya había probado eso salvo lo de overflow, pero no, tampoco.
Sigo buscando sino lo dejaré así, total, lo único que pierdo es el centrado ya que los colores de ahí no son los definitivos, son a fines de debug. El fondo es uniforme.

Gracias.

Marcelo.

[pzin]

¿Lo que quieres es centrar los elementos que flotan? No termino de entenderte bien.

[C2am]

Tal vez esto te ayude un poco.

Saludos

[bazanmarcelo]

Iniciado por Bonez

¿Lo que quieres es centrar los elementos que flotan? No termino de entenderte bien.

Jajaja, ¿tan difícil es?. Nooo, están centrados. El DIV contenedor se centra en la pantalla sin drama y los DIVs de adentro tambien salvo cuando alguno no cabe y se manda para abajo, entonces el DIV contenedor, que sigue centrado (bueno, igual ya no le queda otra que estar centrado porque ya no tiene espacio para andar moviendose) no se ajusta automáticamente y me deja el hueco.

Acá va la imágen un poco mas específica:

Por las dudas aclaro, los DIV's internos son transparentes, lo verde es del DIV contenedor (el que me está dando el problema).



Gracias.

Marcelo.

[pzin]

Ahora si entiendo.

Pensé como C2am que sólo querías centrar el contenido que flotaba, y te iba a decir de usar inline-block y text-align center. Pero eso no solucionaría lo del contenedor.

Supongo que usando @media queries sería la única solución, no caigo ahora mismo en otra. La cuestión sería ir cambiando el tamaño del contendor verde en función de la media querie.

[bazanmarcelo]

Iniciado por C2am

Tal vez [URL="http://ksesocss.blogspot.com/2012/10/Cajas-flotadas-centradas.html"]esto[/URL] te ayude un poco.

Saludos

Gracias C2am.

Lo voy a probar pero creo que es lo mismo que hice hace un rato. El tema es que lo mio no es un problema de centrado, el contenedor sigue centrado como puse en la imágen, pero le queda un espacio dentro. En realidad lo que necesito no es centrar los contenidos, sino achicar el DIV contenedor y que este a la vez se centre lo que supongo hará como hasta ahora ya que centrar se centra, pero con un ancho que incluye ese fondo verde.

Gracias.

Marcelo.

[C2am]

Bueno, entonces podrías jugar un poco con las "medias de Query", o con max-width - min-width, etc.

El problema de explicar con imagenes y no con código, es que no sabemos bien que es lo que tienes realmente.
Muestra el código html + css que estas usando, tal vez la ayuda sea más rápida.
Saludos

[Tedel]

#contenedor
{margin: 0 auto}

.foto
{margin: .4em}

Debería resolver tu problema porque no hay ningún ancho especificado.

Solo veo una dificultad: que las imágenes de la segunda fila sean más anchos que los de la primera. Si así fuese, quedaría un hoyo en la primera fila porque la segunda fila "estiró" el DIV de forma dispareja.

Si esto pasa, estoy de acuerdo con que deberías usar max-width en el contenedor.

Ahora, si realmente quieres que funcione sin excepciones, lo que deberías hacer es cambiar dinámicamente el tamaño de la imagen, no el de los DIV. Ve cualquier galería de DeviantArt.com. Me parece que es lo que buscas.

[mariogl84]

¿Cuál es el código css que le aplicas a tu contenedor?

[fodsite]

Creo que esto es lo que necesitas:

Código:

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo</title>

<style>

* {
	margin: 0;
	padding: 0;
}

body {
	margin: 0 auto;
}

.contenedor {
	max-width: 660px;
	width: 100%;
	border:1px solid red;
	margin:0 auto;
	overflow: auto;
	padding: 0 5px;
	position: relative;
	text-align: center;
}

.hijo {
	border: 1px solid green;
	display: inline-block;
	height: 200px;
	margin: 10px 5px 10px 5px;
	position: relative;
	text-align: center;
	width: 150px;
}

</style>

</head>

<body>
	<div class="contenedor">
		<div class="hijo"></div>
		<div class="hijo"></div>
		<div class="hijo"></div>
		<div class="hijo"></div>
		<div class="hijo"></div>
		<div class="hijo"></div>
		<div class="hijo"></div>
		<div class="hijo"></div>
	</div>
</body>
</html>

De todas formas, deberías usar mediaqueries.