En este caso y aunque parezca algo descabellado siguen existiendo páginas web que utilizan tablas para maquetar. Aunque en una de las primeras entradas del blog ya explicaba el por qué no se deben usar tablas para maquetar sigo observando por el cibermundo que hay gente que no quiere cambiar su modo de programar.
En definitiva en este post voy a explica muy detalladamente cómo flotar elementos para conseguir varias columnas sin necesidad de andar haciendo tablas que enguarren todo el código.
Para empezar debemos distinguir entre elementos de bloque y elementos inline. El flujo de los elementos de bloque (<p>, <div>, ...) es de arriba a abajo. El flujo de los elementos inline, contenidos dentro siempre de elementos de bloque (<img>, <strong>, ...) es de derecha a izquierda y de arriba a abajo.
El problema, obviamente viene al querer alterar este flujo y sacar un elemento de él. Para ello utilizamos la etiqueta float.
Por ejemplo si tenemos dos <div> y queremos poner uno al lado de otro el código sería el siguiente:
<div id="d"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> <div id="i"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
Al añadir el siguiente código css se consigue el efecto deseado.
#d{ float:right;}
Un gran tema con una pésima traducción: Placebo - Twenty Years
