Creating a newspaper or magazine-style layout, in which text flows between multiple columns, has not been seriously approached in web design until very recently. Currently, the technique remains a draft proposal for CSS3.
Continuous multiple-column text design for the web is also somewhat controversial: there is an argument to be made that users have been habituated into reading most web sites like a book, from one edge of the page to the other, and that forcing text into a magazine-style layout is actually a step backwards. However, with a little bit of cleverness, we can actually have the best of both worlds.
First, the text to be divided into columns must be in a single container - most likely, but not exclusively, a div
:
<div id="columns">
<p>Hey, did you know that the modern necktie originates in the cravats worn by Croatian mercenaries during the Thirty Years War almost four hundred years ago? From that kick-ass origin, ties have become the sartorial choice of dandies, fops, and Organization Men of all stripes. Boring!
<p>While we don’t make ties that are capable of staunching aortal bleeding from a musket-ball wound, our extra-skinny, super-strong ties could be used as a garrotte – or a tourniquet, if you wished.
<p>Lorem ipsum dolor sit amet...
</div>
Second, our CSS divides this div
up into a series of columns. I'll demonstrate the technique without vendor prefixes:
div#columns {
column-count: 2;
column-gap: 2em;
column-rule: 5px solid black;
}
This declaration divides the <div>
into two equal width columns, automatically balancing the text between both. The columns are separated by 2em
and a black rule five pixels wide. It is a fluid design: the height of the columns changes as text is added or removed, or if the overall width of the container changes, but there are always two columns.
This layout also gracefully degrades rather neatly: if a browser does not understand the properties, the text is simply displayed normally in the container <div>
.
A solution with greater fluidity is to set column-width
rather than column-count
, allowing the browser to determine just how many columns there should be, based on the width of the container:
div#columns {
column-width: 15em;
column-gap: 2em;
column-rule: 5px solid black;
}
Now the number of columns created is determined by the overall width of our wrapper
<div>
– so long the <div>
can be wholly divided with columns that are 15em
wide with appropriate gaps and rules, the browser will add columns. If the <div>
is less than 34em wide ((2 × 15em) + 4em for the gap) the text will fall into a single column.
Text is automatically balanced between columns, by default; if you want to fill the columns from left-to-right, use column-fill: auto
.
Newspaper-style columnar layout on the web remains controversial and cutting-edge. On the other hand, it does gracefully degrade. Going forward, columnar text layout will likely become a strong visual component in web pages, if used carefully and appropriately.
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/aOqjYP