Html Newspaper Columns

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 tex

Solution 1:

Two notes:

• What works for a printed medium isn't good for a display medium. Having to scroll up to continue to read doesn't seem like a good idea for me. After all, Web pages aren't limited in length...
• You cannot do that with CSS2. I think that CSS3 has support for that (not sure), I doubt it is supported by most browsers.

So I suppose JS is your best bet, but it won't work for users with disabled JS, of course.

Solution 2:

If you decide to do this, it is already possible in Mozilla and WebKit (and Prince) with only CSS:

selector {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
}

Solution 3:

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.

Solution 4:

CSS3 provides a way of turning any HTML node's content into any number of columns. There are properties for controlling the number of columns as well as their width, relative height ("fill," or how the content is divided across the existing columns), gutter between columns, "rule" (dividing line or border), etc.

As a starting point, see the w3schools.com CSS3 Multiple Columns reference page.

However, as usual, IE alone among widely used browsers does not support the column- CSS3 properties.

One cross-browser solution is the Columnizer jQuery Plugin.

Solution 5:

CSS3 will allow you to do this with their multicolumn support, but at the moment, you probably can't rely on very many browsers to support it, so you'll probably need to rely on an alternate method.