Comparación de diseños en columnas: float vs display

Usando float

En este primer caso usamos float left para generar las columnas. Entre los inconvenientes que tiene, está el que las columnas son de altura diferente, puesto que es el contenido quien la determina.

En este caso las columnas no comparten altura, y las formas de solucionarlo no son satisfactorias del todo, porque tendremos que usar o bien la propiedad height o min-height, y eso puede provocar problemas de desbordamiento en el primer caso, y de diferentes alturas en el segunda.

El HTML necesario sería este (sin el contenido de los párrafos):


<section class="fila1">
    <article class="col1">
        <p class="resaltado"> </p>
        <p class="problemas"></p>
    </article>
    <article class="col1">
        <p>...</p>
    </article>
    <article class="col1">
        <p></p>
    </article>
</section>

Y el CSS para la estructura, sin tener en cuenta el formato de los textos:


.fila1 {
    width: 80%;
    margin: auto;
    border: 1px solid;
    overflow: auto;
}
.col1 {
    float: left;
    width: 30%;
    margin: 1%;
    background-color: lightblue;
}

Usando display table-cell

En este caso aplicamos a los 3 contenedores que deben comportarse como columnas la propiedad display: table-cell, que hace que tengan el mismo comportamiento que las celdas de una tabla. Eso significa, entre otras cosas, que las celdas que comparten la misma fila deben tener la misma altura, que sirve en este caso para solucionar el problema anterior.

Aquí el problema principal es que no podemos definir márgenes entre las celdas, puesto que no es una propiedad disponible en una tabla. Del mismo modo, los valores de anchura definidos para las celdas pueden no comportarse como esperamos si no tienen un valor coherente con la anchura de su contenedor. Porque por muy limitado que sea el espacio, todas las celdas de una misma tabla deben estar juntas, no pueden cambiar de fila si el espacio no es suficiente.

El CSS en este caso es el mismo para construir la estructura de la tabla, sólo cambiamos las clases CSS aplicadas:


<section class="fila2">
    <article class="col2">
        <p class="resaltado"> </p>
        <p class="problemas"></p>
    </article>
    <article class="col2">
        <p>...</p>
    </article>
    <article class="col2">
        <p></p>
    </article>
</section>

Y este es el CSS para indicar a los elementos que deben tener un comportamiento visual como si fueran componentes de una tabla:


.fila2 {
    width: 80%;
    margin: auto;
    border: 1px solid;
}
.col2 {
    display: table-cell;
    width: 33%;
    background-color: lightcyan;
    padding: 2%;
    border-right: 1px solid;
}

Bonus: Columnas con table-cell y márgenes entre ellas (como efecto visual)

Si queremos emular visulamente la separación entre columnas recurrimos a la propiedad de CSS background-clip: content-box que sirve para indicar que el fondo del elemento se extienda desde los límites del padding en lugar de desde los bordes. Además usamos un elemento div para encapsular el contenido de cada columna, aunque no sería estrictamente necesario para conseguir el efecto buscado.

La clave aquí está en cambiar los márgenes de las columnas, algo no disponible para las celdas de tabla, por propiedades de padding que sí está disponible para las celdas, y mediante el ajuste del color de fondo a los límites del padding lograr el efecto visual de separación entre columnas.

El HTML queda ahora así:


<section class="fila2">
    <article class="col3">
        <div class="int-col">
            <p>...</p>
        </div>
    </article>
    <article class="col3">
        <div class="int-col">
            <p>...</p>
        </div>
    </article>
    <article class="col3">
        <div class="int-col">
            <p>...</p>
        </div>
    </article>
</section>

Y el CSS necesario es este:


.col3 {
    display: table-cell;
    width: 33%;
    padding: 0 1%;
    background-color: lavender;
    background-clip: content-box;
}
.int-col {
    margin: 0 15px;
}