Side Scrolling Narrow Column Layout

From CSS Discuss

Jump to: navigation, search

The goal here is to get newspaper-like columned layout, with narrow columns, for displaying long texts.

The idea comes from Tofu, a dedicated program for reading text. The author of that program claims that text is more readable in narrow columns, as the reader's eye doesn't have to make long jumps from the end of one line back to the beginning of another.

It's of course possible to do this with HTML tables, but the text in one column won't reflow into another column on window resize or for different target screen or window sizes.

After some initial investigation, it seemed like this kind of text flow didn't fit into the CSS layout model.

A CSS 3 module for Multi-column layouts is in the works. No known browser currently supports this.


I decremented the counter above, since I originally posted this subject. Is this the 3-column layout wiki? No. Is it the CSS wiki? Yes. Is this a challenging layout? Yes. That doesn't mean it's not worth discussing. -- Evan Prodromou

The question is: should we put things here which are not supported by anything, not even a final standard? -- DougBTX

This is a topic of interest to people who use CSS, even though it is not yet supported. It certainly deserves a place on the wiki. Why delete content that could be of interest to someone? -- Simon Willison

jbw: Sure, it should be here, even if it is not yet a standard, and can not be done with the standards now existing. Pointing out what might be useful in a future standard is useful. Reminds me of a quote from Bill Gates 'not many bugs are reported in Windows, so people do not mind them'. I tried to report some bugs, and was unable to get them reported . If you do not allow discussions of what may be needed in the future standards to take place, the future standards may not grow as well as the should. - the w3c may be the place to discuss this.

A live example of a javascript driven solution for that is the Herald Tribune page. -- Chris Heilmann

Online Tool

This online tool may make it easy to generate 4 column layout page. 4 column layout is used in the home page of news website or a webpage with a lot of lists of information.

4 column css layout generator

Personal tools