HTML Fluid Multi Column Layout (newspaper) for text

Question

Is there any CSS technique or a good js technique for laying out content so that you have a "newspaper" like page. Given a div (or whatever) containing a bunch of content to split that content into N columns which total some pre-defined width.

Lets say with an N = 3, assuming my content is sorted A -> Q will render data in the following way:

 A  G  M
 B  H  N
 C  I  O
 D  J  P
 E  K  Q
 F  L  

Any ideas? I'd like to not split the data on the server before rendering 3 divs so that I don't need to really calculate how the data will be rendered. However that is a last resort that can happen.

Answer 1

I know this is bit late to really answer the Dmitriy, but for anyone passing by this question, here is a github project,from the Financial Times, that will do this for you: FTColumnflow: https://github.com/ftlabs/ftcolumnflow Here is the list of features of the project:

• Configurable column widths, gutters and margins
• Fixed-position elements
• Elements spanning columns
• Keep-with-next to avoid headings at the bottom of a column
• No-wrap class to avoid splitting elements across columns
• Grouping of columns into pages
• Horizontal or vertical alignment of pages
• Standardised line height to align text baseline to a grid
• Rapid reflow as required by events such as device orientation or font-size change