demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 1.5K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Column Text Screenshot

CSS Layouts: Newspaper-Style Columnar Text

css / layouts

Estimated reading time: 2 minutes, 19 seconds

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>
<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>
<p>Lorem ipsum dolor sit amet...</p>
</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;
}

Fluid Column Text ScreenshotNow 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 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.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.