Columnas CSS

Uno nunca se deja de asombrar de los usos impropios que se les dan a las etiquetas y entidades del (X)HTML. El caso quizá más común de todos es la mala utilización de ciertos elementos para el diseño de páginas web, conocidísimo es el uso de las tablas, los GIF transparentes y los   para componer el diseño. Ninguno de esos tres elementos son inválidos per se, pero se les está dando un uso inapropiado y que daña seriamente la accesibilidad de la página. Cualquier diseño (he dicho cualquier diseño) que se pueda componer con esos elementos (o con cualquier otro para el caso) se puede emular mediante CSS y la correcta utilización de etiquetas semánticas. ¡Oh! Ya sé que predico en el desierto de la estulticia y la ignorancia, pero hay hábitos difíciles de erradicar. Como Santo Tomás, si no lo veo no lo creo, así que pondré un ejemplo.

Digamos que en éste blog por ejemplo, quisiera poner dos fotos en una entrada, y que encima las quiero lado a lado, una a la derecha y otra a la izquierda. Las soluciones incorrectas serían por ejemplo crear una tabla con dos celdas y poner en cada una una foto, o maquetar las fotos a base de infinitos   e incluso se podrían pegar las dos fotos en una con algún software de retoque fotográfico, aunque en este caso eso no tiene sentido, porque voy a poner a Bill Gates (sí, podría ser alguien con más ideales) y al querido Robert Plant (él sí que sabe cantar) y sería un poco incongruente unir a esos dos.

La solución correcta y en CSS es extremadamente simple (y reutilizable). Lo primero es arropar cada imagen en un <div>, cada uno con una id diferente, en este caso “derecha” e “izquierda”, con lo cual nos quedaría un código parecido a esto:

<div id="post">
   <p>
   Lorem ipsum…
   </p>
   <div id="derecha">
      <img src="img/percy.jpg" alt="Robert Plant" />
      <p>
      Robert Plant
      </p>
   </div>
   <div id="izquierda">
      <img src="img/billgates.jpg" alt="Bill Gates" />
      <p>
      Bill Gates
      </p>
   </div>
   <p>
   Lorem ipsum…
   </p>
</div>

Sólo nos queda añadir el nuevo código CSS a nuestra plantilla ya existente, aunque antes hay que realizar algunos cálculos. Presupongo que la plantilla es fija, con un ancho definido en píxels, en caso de que fuera flexible o basada en porcentajes, la técnica sería diferente. El post tiene una anchura determinada de 500 píxles, por tanto podemos poner 250 píxels a cada id de la siguiente manera:

#post {
   width: 500px;
   }
#derecha {
   float: right;
   width: 250px;
   text-align: center;
   }
#izquierda {
   float: left;
   width: 250px;
   text-align: center;
   }

Las imágenes como es lógico no deben superar en anchura el tamaño del <div> que las contiene, en nuestro caso 250 píxels, y ya está, sin aplicar ningún estilo más daría un resultado parecido a esto:



Evidentemente se podría seguir trabajando en el CSS hasta conseguir algo visualmente atractivo y elegante, pero eso es otra cuestión, aquí sólo se ofrece el esqueleto funcional.