Hola amigos,
Tantas lunas. Me dirijo a ustedes para saber si pueden sugerirme una solución a un problema que tengo en un portal php, pero que creo puede solucionarse sólo con divs y css... espero.
Tengo este portal que genera cajas hechas en div, cada caja es una categoría a la que se van agregando opciones. Se generan tantas categorías como el usuario quiera, por lo tanto se crean varias cajas la mayor parte de las veces. El tema es que al tener ya varias categorías hechas, las cajas se ordenan hacia los lados y crean espacios no deseados como en la siguiente imagen que es del sitio en cuestión:
Si se fijan, luego de la tercera caja crea una cuarta bajo la linea de las primeras 3 y cuando un div es muy alto se crean espacios blancos innecesarios.
La idea es que los divs busquen espacios para posicionarse de forma dinámica para que no queden estos espacios blancos. Como en la imagen modificada a continuación:
Aquí el código de la estructura en php:
Código PHP:
<div class="columna_home">
<!--{foreach from=$arbol item=rama}-->
<div class="caja_arbol">
<p class="subMenu">
<b><!--{$rama.generador_titulo}--></b>
<!--{foreach from=$rama.hojas item=hoja}-->
<!--{ if $hoja.archivo_tipo == "enl" }-->
<a href="<!--{ $hoja.enlace_url }-->"><!--{$hoja.generador_titulo}--></a>
<!--{ else }-->
<a href="index.php?action=plantillas_selec_fecha&ig=<!--{ $hoja.id_generador }-->"><!--{$hoja.generador_titulo}--></a>
<!--{ /if }-->
<!--{/foreach}-->
<span class="fincaja"></span>
</p>
</div>
<!--{/foreach}-->
</div>
Aquí el CSS de las cajas:
Código:
.caja_arbol {
width:290px;
vertical-align:top;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
float:left;
background-position:top;
height:auto;
}
Aquí el link del sitio:
http://www.elquisco.cl/web/?action=plantillas_listar
Esperando su sabia guía, les mando un saludo y agradecido de antemano
