Diseño de columna en HTML (5) / CSS

¿Hay alguna forma en HTML5 / CSS de mostrar las columnas como se muestra a continuación, y aún así tener el flujo de texto correctamente?

###### ###### # C1 # # C2 # # # # # ###### ###### ###### ###### # C3 # # C4 # # # # # ###### ###### ###### ###### # C5 # # C6 # # # # # ###### ###### 

Solo para aclarar: quiero poder escribir todo el texto dentro de un solo elemento y hacer que el CSS cree las columnas.

Aunque esto utiliza un solo elemento, pero las interrupciones se deben definir manualmente.

Use la propiedad column-span y use un elemento como
para definir los puntos de corte verticales. El contenido se verá y representará aproximadamente como:

 

CSS3 multi
columns are
just awesome.

CSS3 | multi ----------------- columns | are ----------------- just | awesome

CSS se ve así:

 p { column-count: 2; column-rule: 1em solid black; } br { column-span: all; } 

Agregue los prefijos específicos del navegador (-webkit, -moz) en consecuencia. column-span puede no ser compatible con ningún navegador hasta el día de hoy. Ver este artículo para más detalles. Aquí está mi débil bash que no funcionó en Chrome.

Si está utilizando HTML5, supongo que también está bien con CSS3:

  
C1
C2
C3
C4
C5
C6
...

Pero, para ser sincero, creo que estás mejor simplemente flotando 6 divs en una caja con el doble del ancho de los divs:

  
1
2
3
4
5
6

Para la solución NO CSS3 use el plugin jQuery: http://welcome.totheinter.net/columnizer-jquery-plugin/

Ejemplo: http://welcome.totheinter.net/autocolumn/sample1.html

Funciona para IE6 +, FF2 +, safari, cromo, ópera 🙂