continuous columns

[sssweb]

Does anyone have any tips for making page templates with continuous columns (i.e. like a newspaper, where text continues from the bottom of one column to the top of the next).

I want to drop text into the template and have it automatically fill the columns as needed. As of now, I have to enter the exact amount of text to fill column 1, then do the same in column 2, etc.

Seems strange that there's no HTML or CSS code to handle this.

[lucy24]

Blast. I read this question just before I had to go out, and was really hoping someone would come up with a brilliant solution because I've got a similar problem with indexes. I mean lists of words, not index.html files ;) I thought of some stuff to try but it didn't work as hoped.

I assume you've got something involving {display: inline-block} with a width set as a percentage of the total, and then paragraphs inside of it.

My highest hopes involved setting the column div to a forced height (in ems or percentage, tried both) so it would wrap vertically in exactly the same way that a series of boxes will wrap horizontally if there's not enough room for them. But this just made the columnar div crash over the following text. Phooey.

I did find one permutation that wrapped automatically-- but it lined up the paragraphs in sets of three from left to right, which is not what either of us wants :(

[tedster]

CSS3 is the first time this long-standing challenge has been addressed. New properties, column-count, column-width and column-gap, work together to generate the solution.

See [developer.mozilla.org...] (Using CSS multi-column layouts) for details and to see live examples you can use to test browser support.

[lucy24]

:: screaming with excitement ::

Oh! It's lovely!

Now to study effect of page- or column-break-related rules...

Quick follow-up:

By happy coincidence, the document I tried it out in is one that I needed a pdf of anyway. It turns out that, without any further instructions, the text is broken into page-sized chunks, and each of those chunks is separately put into three columns of equal height. Fabulous :)

[sssweb]

Thanks, tedster...I'm checking it out.