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:

1. <div id=columns">
2. <p>Hey, did you know that the modern necktie originates
3. in the cravats worn by Croatian mercenaries during the Thirty
4. Years War almost four hundred years ago? From that kick-ass origin,
5. ties have become the sartorial choice of dandies, fops, and
6. Organization Men of all stripes. Boring!</p>
7. <p>While we don’t make ties that are capable of staunching
8. aortal bleeding from a musket ball wound, our extra-skinny,
9. super-strong ties could be used as a garrotte – or a tourniquet,
10. if you wished.</p>
11. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
12. Etiam erat tellus, fringilla non luctus in, volutpat a tellus.
13. Etiam convallis nunc et tellus volutpat vestibulum. Praesent justo
14. massa, porta id porttitor ut, adipiscing in nulla. Mauris vitae felis
15. lectus, nec elementum dolor. Donec ligula metus, blandit nec placerat
16. at, placerat et erat. Praesent non erat quis magna accumsan egestas
17. sed nec elit. Ut nec nibh nisi, et pretium eros. Etiam tincidunt
18. rutrum justo, at suscipit quam posuere vel. Suspendisse ac neque
19. non dolor rutrum fringilla. Nullam varius venenatis lacus sit amet
20. porttitor. Cras porttitor sapien at ante commodo sodales. Nunc risus
21. eros, tincidunt sed varius vel, sodales ac mauris. Quisque sapien erat,
22. lacinia a tincidunt quis, faucibus sit amet diam. Quisque condimentum,
23. nunc ac tincidunt tempor, risus est tincidunt diam, vel tempor felis
24. eros in dui. In sed nibh sapien, non eleifend sem.</p>
25. </div>

Second, our CSS divides this div up into a series of columns. Being a draft CSS3 proposal, each browser implements its own proprietary interpretation of the property:

1. div#columns {
2. -webkit-column-count: 2; -webkit-column-gap: 2em;
3. -webkit-column-rule: 5px solid black;
4. -moz-column-count: 2; -moz-column-gap: 2em;
5. -moz-column-rule: 5px solid black;
6. }

This declaration divides the div into two equal width columns for Firefox, Safari and Chrome, automatically balancing the text between both columns, separating them by 2em and placing a black rule five pixels wide in the middle. 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 CSS3, 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:

1. div#columns {
2. -webkit-column-width: 15em; -webkit-column-gap: 2em;
3. -webkit-column-rule: 5px solid black;
4. -moz-column-width: 15em; -moz-column-gap: 2em;
5. -moz-column-rule: 5px solid black;
6. }

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.

Newspaper-style columnar layout on web pages remains controversial, cutting-edge, and out of the reach of Internet Explorer (at least as the Microsoft browser exists in early 2010). 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.