Texto en varias columnas CSS3

texto en varias columnas con CSS3
Que CSS3 es algo grandioso es evidente, que sus nuevas propiedades rezuman belleza es algo que, a día de hoy, nadie pone en duda y este artículo es un ejemplo más de estas realidades.

Uno de tantos quebraderos de cabeza que se presentan en la maquetación web, es ubicar un texto en varias columnas, al más puro estilo de los añejos periódicos en papel. Cierto es que normalmente no se opta por este tipo de presentación de la información, pero no deja de ser un recurso interesante y útil.

Como en artículos anteriores, para aquellos que prefieran el formato vídeo a leer, aquí tenéis el artículo estilo video:

Revisemos un poco la odisea y los problemas de este tipo de presentación del texto antes de CSS3. Si prefieres ir directamente a la parte sobre CSS3 sólo debes clicar aquí.

Estilo “Me duelen los ojos sólo con verlo”: Usando tablas.

Al principio de los tiempos todo lo solucionábamos utilizando tablas y como no… esto también. ¿Que hace falta poner texto a 2 columnas? Nada… ahí cascamos una tabla de dos columnas y una fila para solucionarlo.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>Texto a dos columnas con tablas</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	</head>
	<body>
		<table>
			<tr>
				<td>Una columna</td>
				<td>Otra columna</td>
			</tr>
		</table>
	</body>
</html>

El código está en HTML4 porque es cuando éramos inconscientes, cafres… y el resultado es:

No hacer en su web... por dios!!!

No hacer en su web… por dios!!!

No se ve mucho así que pongamos un poco de texto del quijote gracias al servicio de quijotipsum:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>Texto a dos columnas con tablas</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	</head>
	<body>
		<table>
			<tr>
				<td>
					En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que carnero, salpicón las más noches, duelos y quebrantos los sábados, lantejas los viernes, algún palomino de añadidura los domingos, consumían las tres partes de su hacienda. El resto della concluían sayo de velarte, calzas de velludo para las fiestas, con sus pantuflos de lo mesmo, y los días de entresemana se honraba con su vellorí de lo más fino. Tenía en su casa una ama que pasaba de los cuarenta, y una sobrina que no llegaba a los veinte, y un mozo de campo y plaza, que así ensillaba el rocín como tomaba la podadera. Frisaba la edad de nuestro hidalgo con los cincuenta años; era de complexión recia, seco de carnes, enjuto de rostro, gran madrugador y amigo de la caza. Quieren decir que tenía el sobrenombre de Quijada, o Quesada, que en esto hay alguna diferencia en los autores que deste caso escriben; aunque, por conjeturas verosímiles, se deja entender que se llamaba Quejana. Pero esto importa poco a nuestro cuento; basta que en la narración dél no se salga un punto de la verdad. 
				</td>
				<td>
					Es, pues, de saber que este sobredicho hidalgo, los ratos que estaba ocioso, que eran los más del año, se daba a leer libros de caballerías, con tanta afición y gusto, que olvidó casi de todo punto el ejercicio de la caza, y aun la administración de su hacienda. Y llegó a tanto su curiosidad y desatino en esto, que vendió muchas hanegas de tierra de sembradura para comprar libros de caballerías en que leer, y así, llevó a su casa todos cuantos pudo haber dellos; y de todos, ningunos le parecían tan bien como los que compuso el famoso Feliciano de Silva, porque la claridad de su prosa y aquellas entricadas razones suyas le parecían de perlas, y más cuando llegaba a leer aquellos requiebros y cartas de desafíos, donde en muchas partes hallaba escrito: La razón de la sinrazón que a mi razón se hace, de tal manera mi razón enflaquece, que con razón me quejo de la vuestra fermosura. Y también cuando leía: ...los altos cielos que de vuestra divinidad divinamente con las estrellas os fortifican, y os hacen merecedora del merecimiento que merece la vuestra grandeza.
				</td>
			</tr>
		</table>
	</body>
</html>
En serio... de verdad de la buena... no usar!

En serio… de verdad de la buena… no usar!

Bueno, ya tenemos nuestro texto a dos columnas con tablas… cierto es que se ve fatal, así que vamos a aplicar un poquito de estilos:

td {
	font-size: 15px;
	line-height: 20px;
	padding: 0 20px;
	text-align: justify;
	vertical-align: top;
	width: 50%;
}

td.first {
	border-right: 5px solid #4BB495;
}

Agregamos el CSS de forma correcta a nuestro HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>Texto a dos columnas con tablas</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" href="style.css" type="text/css" media="all">
	</head>
	<body>
		<table>
			<tr>
				<td class="first">
					En un lugar de la Mancha (...) verdad. 
				</td>
				<td class="second">
					Es, pues, de saber que este (...) grandeza.
				</td>
			</tr>
		</table>
	</body>
</html>

Y el resultado ya es más decentón.

Aunque la mona se vista de seda... ¿te lo repito?

Aunque la mona se vista de seda… ¿te lo repito?

Los problemas de este estilo:

Más allá de que nadie querrá saber nada de ti si a estas alturas utilizas tablas…

  1. No es accesible.
  2. Las tablas se utilizan sólo para mostrar datos tabulares.
  3. Una página maquetada con tablas tarda más en cargar que una correctamente maquetada.
  4. Google no entenderá la realidad de su contenido.

Old-style: Usando cajas flotantes con CSS2.1

Con el paso de los años la maquetación web fue creciendo y pasó de ser un bebé a entrar en la adolescencia. Así que nos volvimos desafiantes y abandonamos el uso de tablas. ¿Qué usamos? Pues cajas, etiquetas div que flotan. Algo así:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>Texto a dos columnas con etiquetas div</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<link rel="stylesheet" href="style.css" type="text/css" media="all">
	</head>
	<body>
		<div class="box">
			<div class="left">
				<div class="content">
					En un lugar de la Mancha (...) verdad. 
				</div>
			</div>
			<div class="right">
				<div class="content">
					Es, pues, de saber que este (...) grandeza.
				</div>
			</div>
		</div>
	</body>
</html>

Con su CSS

.box {
	overflow: hidden;
}

.content {
	font-size: 15px;
	line-height: 20px;
	padding: 0 20px;
	text-align: justify;
}

.left {
	float: left;
	width: 50%;
}

.left .content {
	border-right: 5px solid #4BB495;
}

.right {
	float: right;
	width: 50%;
}
Misma apariencia, pero sin tablas. Esto ya es más decente!

Misma apariencia, pero sin tablas. Esto ya es más decente!

Ya no estamos con HTML4, sino que hemos pasado a XHTML y hemos dejado atrás los problemas de la maquetación por tablas.

Sin embargo esta solución sigue siendo problemática.

¿Por qué ninguno de estos métodos sirve?

  1. Es imposible administrar el contenido: Pues sí… es horrible tener que gestionar contenido que se visualiza en varias columnas. No te queda otra que ir mirando cuándo debes hacer el cambio de columna  cada vez que hay que cambiar los textos … vuelta a empezar. Al final se suele poner una administración con un área de texto por cada una de las columnas y que se cubra… aunque esto facilita algo la labor, no deja de ser algo manual y que, además, no soluciona un problema más actual.
  2. El sufrimiento del multidispositivo: Como el texto se muestra agrupado en diferentes cajas, el problema está servido. Pongamos que has maquetado pensando en 1280px de ancho y has puesto texto a 3 columnas. Eso va a quedar muy mal si el dispositivo tiene un ancho de, por ejemplo 800px (cercano a un tablet de 7′). Lo suyo sería que ese texto se muestre a 3 columnas en 1280, a 2 columnas hasta 800 y 1 columna hasta 400px. Y ahí es donde nos encontramos con una limitación.

Estos problemas podrían solucionarse complicando la maquetación y, sobre todo, la forma de alimentar (por ejemplo, teniendo que alimentar varias veces, una por grupo de resoluciones) pero para qué… si tenemos CSS3

La forma correcta: CSS3 al rescate.

Que cuando se ideó el CSS3 se pensó en todo es algo cada vez más evidente e indiscutible. En CSS3 tenemos las siguientes nuevas propiedades:

  • column-count
  • column-gap
  • column-rule

Texto a varias columnas con column-count

Esta propiedad nos permite dividir el texto en varias columnas. El valor de esta propiedad es un número, siendo este número el total de columnas a utilizar y… mágicamente el navegador se encargará de agrupar el texto en las columnas indicadas automáticamente!! No necesitas tener contemplado, de entrada, las columnas posibles para trasladarlo a la administración desde la que se alimenta el contenido… no tienes que recurrir a una maquetación con varias cajas para colocar el texto… sólo un div con todo el texto dentro y una regla CSS3 asociada que utilice el column-count:

<!DOCTYPE html>
<html>
    <head>
        <title>Texto a tres columnas con HTML5 y CSS3</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="./style.css" type="text/css" media="all">
    </head>
    <body>
        <div class="three-columns">
            <p>
                En un lugar de la Mancha, (...) verdad. 
            </p>
            <p>
                Es, pues, de saber que (...) grandeza. 
            </p>
        </div>
    </body>
</html>
*  {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
    line-height: 1;
}

p {
    font-size: 15px;
    font-size: 1.5rem;    
    line-height: 1.333333334;
    margin-bottom: 20px;
    margin-bottom: 2rem;
    text-align: justify;
}

.three-columns {
    
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

y nada más

Texto a 3 columnas con CSS3. Más sencillo imposible.

Texto a 3 columnas con CSS3. Más sencillo imposible.

Colocando margen en nuestro texto a varias columnas con column-gap

Una vez tenemos ya el texto a varias columnas de forma extremadamente sencilla gracias a las nuevas propiedades de CSS3 es normal que querramos que exista cierto aire entre las diferentes columnas… y ahí es donde entra column-gap

El valor para nuestro column-gap será un valor en px, pt, rem, etc. Lo ideal será utilizar los rem. ¿Que no sabes utilizar esta medida? Sin problema, sólo debes consultar mi artículo sobre el uso de rem.

Cambiamos nuestro CSS de la siguiente manera:

*  {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
    line-height: 1;
}

p {
    font-size: 15px;
    font-size: 1.5rem;    
    line-height: 1.333333334;
    margin-bottom: 20px;
    margin-bottom: 2rem;
    text-align: justify;
}

.three-columns {
    
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    
    -webkit-column-gap: 20px; /* Chrome, Safari, Opera */
    -moz-column-gap: 20px; /* Firefox */
    column-gap: 20px;
    
    -webkit-column-gap: 2rem; /* Chrome, Safari, Opera */
    -moz-column-gap: 2rem; /* Firefox */
    column-gap: 2rem;
    
}

Y ya tenemos aire, de 2rem, entre las columnas:

Espacio de 2rem entre las columnas

Espacio de 2rem entre las columnas

Colocando un borde separador en nuestro texto a varias columnas con column-rule

Como ya comenté… cuando hicieron CSS3 pensaron en todo… o en casi todo… y con column-rule no hacen más que demostrarlo una vez más. ¿Queremos poner un borde entre las diferentes columnas? Para eso tenemos column-rule, una propiedad nueva que acepta, como valor, lo que utilizamos normalmente para nuestro border.

*  {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
    line-height: 1;
}

p {
    font-size: 15px;
    font-size: 1.5rem;    
    line-height: 1.333333334;
    margin-bottom: 20px;
    margin-bottom: 2rem;
    text-align: justify;
}

.three-columns {
    
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    
    -webkit-column-gap: 20px; /* Chrome, Safari, Opera */
    -moz-column-gap: 20px; /* Firefox */
    column-gap: 20px;
    
    -webkit-column-gap: 2rem; /* Chrome, Safari, Opera */
    -moz-column-gap: 2rem; /* Firefox */
    column-gap: 2rem;
    
    -webkit-column-rule: 5px solid rgb(75, 180, 149); /* Chrome, Safari, Opera */
    -moz-column-rule: 5px solid rgb(75, 180, 149); /* Firefox */
    column-rule: 5px solid rgb(75, 180, 149);
    
    -webkit-column-rule: 0.5rem solid rgb(75, 180, 149); /* Chrome, Safari, Opera */
    -moz-column-rule: 0.5rem solid rgb(75, 180, 149); /* Firefox */
    column-rule: 0.5rem solid rgb(75, 180, 149);
    
    margin: 20px;
    margin: 2rem;

}
Texto a tres columnas, con separador entre ellas. Más fácil imposible.

Texto a tres columnas, con separador entre ellas. Más fácil imposible.

Todo es más fácil con CSS3

La conclusión más evidente es que, con CSS3, todo es más fácil. El gran quebradero de cabeza que era poner un texto a varias columnas se convierte en algo extremadamente sencillo con las nuevas propiedades column-count, column-gap y column-rule.

Además, como estamos hablando de CSS3, podemos utilizar las media queries (el próximo artículo del blog las abordará) para mostrar el texto a 3 columnas en vista de PC, 2 columnas en vista de tablet y 1 columna en vista móvil… por lo que todo son bondades… bueno casi todo.

Como siempre, los navegadores tienen que implementar las propiedades de CSS3 y claro… ahí siempre hay lío. Por un lado, se tienen que utilizar los prefijos propietarios para chrome, opera, safari y firefox (-webkit -moz), algo que bueno… molesta un poco, pero se hace y listo. Por otro lado está el caso del Internet Explorer… siempre para tratar a parte. En esta ocasión, Internet Explorer soporta el uso de estas nuevas propiedades de CSS3 a partir de su versión 10, esto significa que en versión 9 y anteriores no funcionará y se mostrará todo a una columna. Para saber qué navegadores soportan las propiedades de CSS3 que quieres utilizar, tenemos la web Can I Use.

Aunque esto último pueda parecer un problema, es muy común que las webs en HTML5 utilicen frameworks CSS3 (sobre todo pensando en responsive design) como bootstrap o foundation, estos frameworks suelen requerir IE9+ y cuando se usa IE8- desde el IE se ve siempre la vista móvil (porque estos frameworks siguen la filosofía mobile first), por lo que tu web no se verá mal en IE, simplemente se verá como si fuese un móvil… aunque siempre podrás ponerle una hojas de estilos sólo para IE y mejorar la experiencia en ese ¿navegador?

Recursos disponibles

  1. Puedes probar el resultado en la demo online.

    1. HTML4
    2. XHTML
    3. HTML5
  2. Puedes ver el proceso paso a paso en mi canal de youtube
  3. Puedes descargar el código desde github

14 pensamientos en “Texto en varias columnas CSS3

  1. Vanesa Quesada
    Responder

    Al aplicar esta propiedad, me sale el texto en columnas pero las lineas de ambos párrafos no me salen alineadas. La primera columna empieza un poco más abajo que la segunda y no se ven simétricas como en el ejemplo que pones. ¿Tengo que aplicar alguna otra propiedad para evitar esto? Muchas gracias por el tutorial.

    1. Buenas. Seguramente te falte la regla con el selector universal (*). En el ejemplo utilizo el selector universal para eliminar el margin, padding y establecer para todos el box-sizing a border-box. Si, por ejemplo, tu texto está en un párrafo (p), el navegador por defecto te mete un margin-top, algo que la regla asociada al selector universal lo quita (margin: 0), por eso salen las 3 columnas sin margen superior. O sea, debes eliminar el margin para los p o al menos el primer p del texto que se mostrará a varias columnas, si no quieres con el universal con un .three-colums p:first-of-type

      saludos!

  2. Hola una pregunta, en el caso que quiera agregarle un titulo al texto o sea un h1, h2 , etc. Quedan bien sobre los parrafos?

  3. Muy interesante y el CSS3 funciona en pantalla, para Chrome.
    Al imprimir, se olvida de las columnas.
    🙁

    ¿Alguna solución?
    Gràcies!

  4. fredy rodriguez
    Responder

    Como podria aplicar esa combinacion de codigos en este arreglo pliis :s

    Fredy de Jesus Rodriguez Sanchez

    <?php
    //Ordenar desde el menor al mayor
    echo "Ordenar desde el menor al mayor: “;
    $alumnos = array(“Pepe”, “Juan”, “Marcelo”, “Alberto”,
    “Gerardo”);
    sort($alumnos);
    foreach ($alumnos as $key => $val) {
    echo “alumnos[” . $key . “] = ” . $val . “”;
    }
    //ordenar de mayor a menor (orden inverso… Reverse order)
    echo “Ordenar de Mayor a Menor”;
    rsort($alumnos);
    foreach ($alumnos as $key => $val) {
    echo “alumnos[” . $key . “] = ” . $val . “”;
    }
    //Ordenar arrays por su índice
    echo” Ordenar arrays por su índice “;
    $calles = array(“h”=>”Leganitos”, “e”=>”Castellana”,
    “a”=>”Bailén”, “z”=>”Fuencarral”);
    ksort($calles);
    foreach ($calles as $key => $val) {
    echo $key .” = ” . $val . “”;
    }
    //ordenar por índice o clave, pero en orden inverso
    echo “ordenar por índice o clave, pero en orden
    inverso “;
    krsort($calles);
    foreach ($calles as $key => $val) {
    echo $key .” = ” . $val . “”;
    }
    //ordenar manteniendo los índices
    echo “ordenar manteniendo los índices “;
    $capitales = array(“España” => “Madrid”, “Argentina”
    => “Buenos Aires”, “México” => “Ciudad de México”,
    “Brasil” => “Brasilia”);
    asort($capitales);
    foreach ($capitales as $key => $val) {
    echo $key .” = ” . $val . “”;
    }
    //ordenar manteniendo los índices, Reverso
    echo “ordenar manteniendo los índices,
    Reverso “;
    $ciudades = array(“Madrid”, “Barcelona”, “Valencia”,
    “Sevilla”, “Bilbao”);
    arsort($ciudades);
    foreach ($ciudades as $key => $val) {
    echo $key .” = ” . $val . “”;
    }
    // Ordena de maneta natural
    echo ” Ordena de maneta natural”;
    $productos = array (“producto 11”, “producto 1”,
    “producto 12”, “producto 2″);
    natsort($productos);
    foreach ($productos as $key => $val) {
    echo $key .” = ” . $val . “”;
    }
    ?>

  5. No consigo las tres columnas, sin embargo si consegui dos columnas. Utilizo el editor Brakets. Soy principiante en paginas Web (estoy bastante verde, jajaja) agradecería consejo tengo que conseguir hacer las tres columnas, con titular e imagen para cada una de ellas. Muchas gracias. Estaré muy pendiente.

  6. una pregunta,¿pero si solo quiero ponerlo al final de mi pagina para que solo la parte final sean tres columnas? devere poner un “div” para que esto solo afecte al final

  7. Excelente blog, me ha encantado. Esta propiedad es más optima para el uso de texto, verdad? Hice una pruba con imagen, y el texto se sobrepone. Por otra parte, porque crees que por ejemplo, Boostrap no lo usé? Finalmente si es texto ellos siguen teniendo el problema que se tiene con los float.

    Muchas gracias de nuevo, se aprende un montón (y sin sufrir) contigo.

  8. ¿Como haría para colocar una imagen a la izquierda de cada columna? Hace días que trato, pero no encuentro la manera de hacerlo. Ayuda, por favoor!

Deja un comentario