box en css

[zreep]

Hola a todos, tengo una consulta y espero se claro ya que nose como buscar el tema.

El tema es el siguiente. Tengo un while en php que genera un buqle y con el un div cuya clase se llama box, en la hoja de estilo tengo esto;

Código HTML:

.box    {
width: 250px; 
float: left; 
margin-bottom: 5px; 
padding-left: 14px; 
z-index: 1;
}

lo cual me muestra todos los datos en forma horizontal, pero el problema es que cada box tiene un tamaño distinto ya que la info no es la misma y a la hora me mostrar me deja muchos espacios en blanco y no logro que esten uno bajo otro. Fui claro?

Bueno espero me ayuden y gracias

[lfriasherrera]

Si puedes poner el link al error, sería mejor para poder ayudarte.

[pzin]

Ayudaría tener el HTML que te da para entender el problema que tienes, el cual yo no acabo de entender muy bien.

[zreep]

No creo que haga falta poner el php. La clase .box ordena todo.

Código HTML:

<div class="box">
<div class="text">
<div class="titulo"><?php echo $fila['titulo'];?></div>
<div class="nota"><?php echo $fila['nota'];?></div>
<div class="fecha"><?php echo $fila['fecha'];?></div>
</div>
</div> 

[pzin]

Supongo que el problema será que cuando el contenido de .titulo o .nota es demasiado corto dará sensación de vacío. Más que de CSS, es un problema de encontrar la mejor forma de representar los datos.

Si lo tienes subido a algún sitio para ver la estructura funcionando con datos y hacer alguna prueba mejor.

[zreep]

Aca dejo una muestra de lo que esta pasando! es temporal!

http://bnotte.com/prueba2.php

[pzin]

Si quieres una solución pura en CSS, entonces tendrías que trabajar con columnas en vez de con filas. Pero seguramente esto te crearía un problema de lado servidor con el PHP ya que algunas columnas te serán muy largas y otras muy cortas.

Una solución vía javascript, es un plug-in de jQuery llamado masonry que lo que hace es justamente lo que necesitas y se adapta a las mil maravillas. Yo lo he usado en alguna ocasión y va perfecto.

[zreep]

Gracias Bones... voy a ponerme a leer un poco! en cuanto lo solucione lo comparto!!

[Gothgauss]

Prueba con un clear:left dentro del .box, así:

Código HTML:

.box    {
clear:left;
width: 250px; 
float: left; 
margin-bottom: 5px; 
padding-left: 14px; 
z-index: 1;
}