HTML newspaper columns

Question

I'm trying to create newspaper style columns using a block of text. I would like the text to be evenly spread out across 2 columns which could react to change of length in the text.

Is this possible using just HTML/CSS, if not could javascript be used?

Thanks

Answer 1

So i was looking for an answer for this question, sadly at first i didn't really found one, now 3 hours later i did.

I found a JavaScript lib which uses the css3 attributes (if i understood it right, only tried to make it work and it did, gonna read in the js later )

lib found here: http://www.csscripting.com/wiki/index.php?title=CSS3_Multi_Column

only disadvantage is that the text you want to have multicolumned HAS to be between two tags ( i prefer using <p> tag, as it also supports multiple <p> tags.)

tested it in ff 3.6, ie 8, opera 10.51 and chrome 4.1. Im not in the position to test for older browsers, so i recommend someone does that soon ;P

cheers!

Answer 2

It's in the CSS3 spec, and Moz/Webkit already have it implemented with vendor prefixes. Use the column-count and column-gap properties:

#container {
  -moz-column-count: 2;
  -moz-column-gap: 20px;
  -webkit-column-count: 2;
  -webkit-column-gap: 20px;
  column-count: 2;
  column-gap: 20px;
}

Note that, of course, these are not supported by any version of IE that anyone uses. CanIUse.com claims IE 10 will support it as part of CSS3.

Answer 3

I agree with PhiLho. If you still want to try it the js code dividing your content into two columns is quite simple if the columns have fixed widths. The tricky bit is deciding where to split the content. You probably don't want to split in the middle of a word etc.

You could try with the following scenario: Add two columns into your page. Put your text into the first column (this allows non js browsers to still display your content). Get the text with js (eg. from onload event). Find the next index of "." (or if you have paragraphs "< /p>") starting from the middle. Use that index to split the text and put the first part back in the first column and so on...

Answer 4

I managed to do something like this but again, not in CSS, I used PHP to count words and split the text. Unfortunately counting words is a pretty bad way of going about doing it, since some words are longer than others and the columns don't match up. My design was inspired by the IHT website. It's not very hard to implement in PHP.

Answer 5

The IHT has a nice implementation of a 3 colums format. It however seems to be calculated server side, I guess by counting words.