Welcome to WebmasterWorld Guest from 54.242.173.65

Forum Moderators: incrediBILL

Message Too Old, No Replies

continuous columns

     
8:54 pm on Nov 4, 2011 (gmt 0)

Preferred Member

10+ Year Member

joined:Nov 10, 2005
posts: 387
votes: 0


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.
2:18 am on Nov 5, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:13000
votes: 289


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 :(
5:32 am on Nov 5, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 0


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.
8:57 am on Nov 5, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:13000
votes: 289


:: 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 :)
12:34 pm on Nov 5, 2011 (gmt 0)

Preferred Member

10+ Year Member

joined:Nov 10, 2005
posts: 387
votes: 0


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

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members