Como crear columnas de igual tamaño en WordPress

Este tutorial fue creado por Alexander Moya, autor del blog de tecnología TecnoVits para la comunidad de Ilmaistro.

Crear columnas de igual tamaño con distinto contenido es una de las técnicas más buscadas para WordPress sin embargo la mayoría de técnicas disponibles incluyen métodos largos, con JavaScript, con imágenes y otros elementos extras que no son tan sencillos de manejar y flexibles como PHP y CSS.

Este tutorial explica como crear columnas de igual tamaño en WordPress con una técnica que utiliza ambos, tanto PHP como CSS y además que sirve en cualquier navegador. Supongamos que tenemos dos columnas en WordPress (ejemplo: sidebars o entradas divididas en dos columnas) y queremos que ambas columnas sean de igual tamaño, sin embargo ocurre esto:

Esto es fácilmente arreglado, a partir de ahora trabajaremos con tres columnas en PHP, dependiendo de lo que quieran meter ya sea tres sidebars, tres columnas para artículos de un blog, etc. llamaremos a esto contenido1, contenido2 y contenido3.

Primero veamos el siguiente código y veremos que está sucediendo:

   1: <div id="fila1">

   2: <div id="fila2">

   3: <div id="fila3">

   4:     <div id="columna1">

   5:

   6:         contenido1

   7:

   8:     </div>

   9:     <div id="columna2">

  10:

  11:         contenido2

  12:

  13:     </div>

  14:     <div id="columna3">

  15:

  16:         contenido3

  17:

  18:     </div>

  19: </div>

  20: </div>

  21: </div>

¿Qué sucedió?

• Cada columna (contenido1, contenido2 y contenido 3) esta rodeada por un contenedor div llamados columna1, columna2 y columna3.
• Hay tres contenedores div que rodean enteramente a los 3 divs de las 3 columnas (fila1, fila2 y fila3)

Esto nos dice que si tenemos N columnas, entonces habrán un div por cada columna que la encierra y además N divs que encierran a todas las columnas, siguiendo esta idea, si quisieran solo dos columnas tendrían algo así:

   1: <div id="fila1">

   2: <div id="fila2">

   3:     <div id="columna1">

   4:         contenido1

   5:     </div>

   6:     <div id="columna2">

   7:         contenido2

   8:     </div>

   9: </div>

  10: </div>

Eso es todo el PHP necesario para lograr esta técnica, ahora nos iremos a la parte fuerte del problema, el CSS, para ello abrimos style.css y comenzamos.

Recuerdan los contenedores llamados fila que encierran a todas las columnas? pues estos contenedores van a caer uno encima del otro, la técnica funciona por que el contenedor externo más largo va a empujar los otros hacia abajo, luego cada fila cae encima de la otra pero corrida hacia la derecha, al final cortamos el exceso y tenemos las columnas de igual tamaño:

Primero veremos el código CSS de las tres filas para nuestras tres columnas de igual tamaño:

   1: #fila1 {

   2:     float:left;

   3:     width:100%;

   4:     overflow:hidden;

   5:     position:relative;

   6:     margin-top: 15px;

   7:     background:#dafad8;

   8: }

   9: #fila2 {

  10:     float:left;

  11:     width:100%;

  12:     position:relative;

  13:     right:33.33%;

  14:     background:#d8e9fa;

  15: }

  16: #fila3 {

  17:     float:left;

  18:     width:100%;

  19:     position:relative;

  20:     right:33.33%;

  21:     background:#d9adad;

  22:     padding:10px 0 10px 0;

  23: }

¿Que sucedió?

• Todas están puestas hacia la izquierda por necesidad para el siguiente punto.
• Las filas 2 y 3 son corridas un 33.33% hacia la derecha con respecto a la anterior, esto nos asegura que el espacio disponible en cada columna sea del mismo tamaño, osae cada una será un tercio del ancho total.
• La posición se declara “relative” para que se mueva hacia la derecha desde su posición normal.
• Y cada fila está pintada de un color diferente para notar el efecto.

Con esto ya tenemos cada fila en su lugar y con su tamaño respectivo, ahora falta poner el contenido de cada columna en su lugar y con su propio tamaño:

   1: #col11 {

   2:     float:left;

   3:     width:300px;

   4:     position:relative;

   5:     left:68%;

   6:     overflow:hidden;

   7: }

   8:     #col12 { float:left;

   9:     width:300px;

  10:     position:relative;

  11:     left:70%;

  12:     overflow:hidden;

  13: }

  14:     #col13 {

  15:     float:left;

  16:     width:300px;

  17:     position:relative;

  18:     left:72%;

  19:     overflow:hidden;

  20: }

¿Qué sucedió?

• Cada columna es posicionada a la izquierda
• Cada columna tiene un ancho de 300px
• Pusimos su posición relativa para el siguiente punto
• Corrimos cada columna un cierto porcentaje para acomodarlo con las filas
• Pusimos overflow:hidden para cortar el exceso que sobra de cada columna

Los tamaños y porcentajes de cada fila y columna pueden variar en cada blog debido al ancho del mismo, estas tres columnas fueron echas para un blog de más de 900 pixeles de ancho.

Y con esto terminamos el tutorial sobre columnas de igual tamaño, a prueba y error se pueden crear tantas columnas como sea necesario, solo hace falta recordar que por cada columna, hay un div que la encierra y un div externo que encierra a todas las columnas.

Ventajas:

• Otras técnicas incluyen JavaScript que solo aumentan el tiempo de carga de la página
• Otras técnicas utilizan imágenes que hay que estar modificando cada vez que la columna cambia de tamaño
• Una vez hechos estos pasos, ya es posible agregar cuanto contenido sea necesario
• Al ser solo PHP y CSS no aumenta el tiempo  la carga de la página

Espero les haya gustado este tutorial, no duden en dejar comentarios con sus experiencias con esta técnica o si conocen alguna mejor o alguna forma de mejorarla.