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:

Today in Wales, someone actually      Nobody was harmed in
did something interesting.            the incident, although one 
Authorities are baffled by this       elderly victim is receiving
development and have arrested the     counselling.
perpetrator.     

[my really bad attempt at coming up with something to write]

Is there a way I can do this with just CSS alone? I'd prefer not to have to use multiple divs. I'm open to using JavaScript too, but I'm -really- bad at that, so help would be appreciated. I was thinking maybe JavaScript could count how many <p>'s there are in the content div, and then move the second half of them to be floated right based on that? Maybe? Advices would be appreciated :D

Answer 1

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