Hace poco leía una entrada de Dicas e Templates donde nos mostraba como dividir el widget de categorías en dos columnas.

Profundizando un poco más realmente podemos dividirlo en el número de columnas que queramos, como es mí caso que lo he dividido en tres. Y si queramos podemos dividir cualquier lista.


Para ello debemos implementar el siguiente código CSS

#Label1 ul li{
float: left;
width: 45%;
}


Para entender lo que estamos haciendo debemos primero conocer el HTML de ese widget. Es una lista y cualquier lista en HTML se define de esta forma


<ul>
<li>TEXTO</li>
<li>TEXTO</li>
<li>TEXTO</li>
<li>TEXTO</li>
<li>TEXTO</li>
<li>TEXTO</li>
...
</ul>


Este código nuestro navegador lo interpreta como una lista y nos la representa como tal. Pero si le añadimos el código CSS anteriormente expuesto, ¿que ocurre entonces?



En el código CSS elegimos sobre que queremos actuar, en este caso cada elemento comprendido entre <li> y </li>


Como, normalmente, no le indicamos nada más, el espacio del texto entre <li> y </li> ocupara una línea, pero si ese espacio se lo reducimos indicando un width (width:45%;), dejamos espacio libre detrás


Para forzar que se nos divida en columnas, debemos posicionarlo, para ello indicamos float: left; Con eso conseguimos que cada elemento se posicione a la izquierda y aunque sea un contrasentido, si la izquierda del elemento ya esta ocupada se posicionara inmediatamente detrás y no debajo. Por lo que el widget primero ira rellenando de izquierda a derecha y no de arriba abajo.



Entendiendo este concepto podemos dividir cualquier widget que sea una lista y podemos dividirlo en el numero de columnas que queramos, solo dependerá del ancho del espacio que tenemos para el widget. Se acabaron las listas interminables.
Autor: . Consultor y auditor en posicionamiento web. Desarrollo de aplicaciones, diseño y programacion de plataformas y paginas web. Formación, profesor en el Programa SmmUs (Social Media Marketing) de la Universidad de Sevilla. Cursos sobre social media en Cámaras de Comercio de Málaga, Sevilla y Córdoba. Puedes encontrarme en Google Plus y Twitter .

¿Te gustó este post? No te pierdas los próximos, síguenos en redes sociales.

Te recomendamos también