¿Cómo mejorar el CSS de las cajas de Foros del Web?

[cvander]

La representación gráfica de foros en portada o de subforos y tags en cada foro se está haciendo a través de unas cajas que le dan un tamaño grande al tema más importante del foro, un tamaño menor a los temas secundarios y luego un tamaño más pequeño al resto de temas. Ha sido interesante jugar con estas cajitas y llevaras a todo el foro, particularmente donde nos hemos encontrado etiquetas con más caracteres, títulos que parecen estirarse y descuadrar lo que vemos.

Una de las formas de combatir esto es modificando los nombres de algunos foros y etiquetas, para reducir el tamaño de las cajas, pero no es lo más eficiente, ni la forma más inteligente de pensar a futuro, queremos trabajar en el CSS y en la estrategia de mostrar las cajas.

¿Cómo hacer para que las cajas más pequeñas queden mezclas con las medianas o las grandes a un nivel superior? Tenemos que delimitarles un máximo de ancho acaso? O crees que podríamos jugar con alguna otra propiedad?

Agradecemos cualquier luz sobre esto, pues seguimos quebrándonos la cabeza sobre la mejor forma de implementarlo.



Por ejemplo vean en esta imagen. Nos encantaría que las cajas chicas se corrieran a la derecha de las cajas grandes, para no dejar ese espacio y agrupar mejor la información.



Este es un ejemplo donde los tamaños hace que todo encaje bastante bien, sin apretar de más, pero no siempre se cumple ese orden.



Y aquí otro más donde la última linea de cajas pequeñas, hubiese quedado mejor agrupada a la derecha de las cajas grandes superiores.

[GAST0N]

Emm.. a ver lo primero y sin analizar nada..lo q se me viene a la mente es que podrian contar los caracteres desde php,y si tiene determinado numero de caracteres que flote para un lado y si no que flote para otro.. en fin.. jugar con el css determinando el numero de caracteres de cada titulo

[dgfrancisco]

Creo q debes mirar con más cuidado los CSS, al parecer ahi una herencia q no deja q esto pase, mirando un poco hice este cambio y se modifico en algo como quieres:

Código:

.content_box li {float: left !important;}

a lo mejor y es por ahí la solución ;)

[anirom89]

Puedes ponerle a los cuadros medianos y chicos el mismo tamaño o también podrias hacer los cuadros de tamaño mediano, del largo que el grande y los chicos del tamaño que están ordenados en el espacio que te queda y también reduciendo un poco el tamaño del padding

[cvander]

Gracias por las recomendaciones.. Vía twitter me están dejando otras ideas:

@seouyx: @nicobf @cvander créo que colocando el max-width: en el div principal sin atributos en los siguientes, se acomodarian segun entrasen ;)

@mipinsua: @cvander Pondria por ejemplo un padding-left: 5px, un padding-right:5px y widht:auto asi el ancho lo da la palabra

@mipinsua: @cvander Creo que puedes hacerlo con la propiedad Float y lo del ancho lo puedes manejar con paddings .

@alejandrogm: @cvander Para mi seria con un max-width.

@nicobf: @cvander el float:left y el ancho se lo das al DIV, el resto se acomoda solo.. o sea, si se pasa del ancho se va para la línea de abajo. :)

@nicobf: @cvander @forosdelweb probaste con float:left en DIV´s anidados? obviamente dando el ancho a c/uno.. a las ordenes! :)

[j_aroche]

Matando el <li class="spacer"></li> y ajustando los altos de las cajitas llegué a esto, ¿Qué te parece?:

[anirom89]

Algo asi

http://img190.imageshack.us/i/prueb2.png

[cvander]

Iniciado por j_aroche

Matando el <li class="spacer"></li> y ajustando los altos de las cajitas llegué a esto, ¿Qué te parece?:

Mucho mejor.. Hay que aplicar el cambio y probarlo con todas las cajitas.