Automatic two columns with CSS or JavaScript

Question

I\'m currently developing a website and my client wants the text of various articles to overflow into two columns. Kind of like in a newspaper? So it would look like:

<

Answer 1

Here's a JQuery plugin which does columns automatically, and can even vary number of columns based on screen size.

I haven't used this myself, but check it out.

Answer 2

This is supported in a Mozilla only CSS extension: -moz-column-count. See : https://developer.mozilla.org/en/CSS3_Columns

Answer 3

the good news is, there is a CSS only solution. the bad news is, there isn't any major support for it in existing browsers. if it was implemented, it would look like this:

div.multi {
  column-count: 3
  column-gap: 10px;
  column-rule: 1px solid black;      
}

i think for now your best bet is probably server side as mentioned by monoxide

Answer 4

First off, i don't think just css can do that, but i would love to be proven wrong.

Second, just counting paragraphs won't help you at all, you need at least all the heights and calculate the middle of the text height based on that, but you'd have to account for window resizing etc. I don't think there is a reasonably simple off the shelf solution. Unfortunately i'm pessimistic about finding a perfect solution to this problem, But it is an interesting one.

Answer 5

I'd probably handle it in your backend, whatever that happens to be. An example in PHP might look like:

$content = "Today in Wales, someone actually did something...";
// Find the literal halfway point, should be close to the textual halfway point
$pos = int(strlen($content) / 2);
// Find the end of the nearest word
while ($content[$pos] != " ") { $pos++; }
// Split into columns based on the word ending.
$column1 = substr($content, 0, $pos);
$column2 = substr($content, $pos+1);

It should probably be possible to do something similar in JavaScript with InnerHTML, but personally I'd avoid that whole situation because more and more people are using plugins like NoScript that disables JavaScript till it's explicitly allowed for x site, and above anything else, div's and CSS were designed to degrade nicely. A JavaScript solution would degrade horribly in this case.

Answer 6

If you are using Mootools, you can check out MooColumns.