Problema para organizar div con categorías

[laexpo]

Hola a todos! Les comento el problema que se me ha planteado a la hora de crear un template que trae categorías y subcategorías desde una base de datos.

Necesito que las categorías se ordenen visualmente como si fuese un rompecabezas, una especie de float:left pero donde se cubran los huecos que dejen categorías más pequeñas que otras (en la imagen de ejemplo se ve claramente a lo que refiero).

Bien, las categorías se ordenan alfabéticamente desde la base y llegan así al template, en el código aparece una debajo de la otra. Como cada categoría trae a su vez las sub-categorías que les corresponden -puede tener una o muchas-, los divs que se arman comienzan a tener distintas alturas. Si cada div -con todo lo que trae dentro- lo pongo float:left, las categorías se ordenan, pero comienzan a generarse huecos porque hay unos más altos que otros, y allí se genera el inconveniente.



Esto es lo que quiero lograr, sabiendo que no me sirve el float left, y que las categorías ya vienen ordenadas automáticamente desde la base.

Espero se entienda y alguien aporte soluciones.

Saludos.

[C2am]

Hola
Y sí consideras la posibilidad de tener 3 div "columnas" (con float:left) y dentro ubicas los div categorias y subcategorias ?
Con esto ya no tendrias problemas con el float.
Es una posible solución.

Saludos

[laexpo]

Gracias por tu respuesta, C2am, pero es inviable hacerlo de esa forma, ya que no puedo discriminar las categorías dentro de contenedores distintos, trae a todas juntas, y sólo pueden alojarse en un contenedor, tenga el estilo que tenga. Quizás me faltó aclararlo.

Gracias de todas formas por tu respuesta.

Saludos.

[C2am]

Tienes un ejemplo de lo que debes poner dentro de cada div?
Que usas: php. asp, javascript?
En la imagen tienes tres div ordenados horizontalmente, eso seria (categoria - subcate - subsubcat) o cada uno contiene todo eso?
Explicate un poco más, porque si cada cajita azul contiene cat-subcate la solución que te propuse aún sería viable, (claro siempre y cuando puedas modificar el script que trae los datos de la base).
Y si no es así, pues, pensaremos en algo mejor.

Saludos
PD: si tienes un enlace para ver, mucho mejor

[laexpo]

Te cuento un poco más en detalle entonces, quizás puedas darme una mano. Voy pasándote algunos códigos para que veas cómo se arma, espero ser lo más conciso posible. El sitio está hecho en Python y Django, por ende, los objetos se llaman con los tags correspondientes, puede ser:

Código HTML:

<div id="content">

<!-- ESTE FOR LLAMA A LA CATEGORIA DE NIVEL 2-->
{% for categories.level2 %}
  <div id="categ_2">
    
    <h1>{{categ_2.name}}</h1>
    <!-- ESTE FOR LLAMA A LAS CATEGORIAS DE NIVEL 3 VINCULADAS A LA DE NIVEL 2 QUE LAS CONTIENE -->
    {% for categories.level3 %}
    <p>{{categ_3.name}}</p>
    {% endfor %}
    
  </div>
{% endfor %}
<!-- ESTE CIERRA EL PRIMER FOR-->

</div> 

Entonces, lo que vos estás viendo en el ejemplo, de color celeste, sería el <div id="categ_2">, que por dentro tiene sub-categorías. El {% for categories.level2 %} lo que hace es traer todas las categorías de nivel 2 alfabéticamente ordenada, por eso no puedo ir metiéndolo en distintos contenedores, trae todo dentro del <div id="content">...

Esto, una vez online, se mostraría así -lo hago con un ejemplo básico-:

Código HTML:

<div id="content">

  <div id="categ_2">
    <h1>Automotores y Autopartes</h1>
    <p>Accesorios</p>
    <p>Carrocería</p>
    <p>Motor</p>
  </div>

  <div id="categ_2">
    <h1>Construcción</h1>
    <p>Aberturas y Cerramientos</p>
    <p>Materiales</p>
    <p>Pisos y Revestimientos</p>
  </div>

  <div id="categ_2">
    <h1>Muebles y Decoración</h1>
    <p>Decoración Ambiental</p>
    <p>Jardín y Exteriores</p>
    <p>Muebles de Interior</p>
  </div>

</div>