CODEWITHSUNDEEP
javascripthtmlcssmultiple-columnscss-multicolumn-layout
thesmallprint
thesmallprint

Reputation: 2391

How to make text over flow into two columns automatically

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.

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?

Upvotes: 14

Views: 14096

Answers (7)

Owen
Owen

Reputation: 84593

The good news is that there is a CSS-only solution. If it was implemented, it would look like this:

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

Upvotes: 16

Matt Dawdy
Matt Dawdy

Reputation: 19717

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.

Upvotes: 2

tholane
tholane

Reputation: 1

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

Upvotes: -1

Kris
Kris

Reputation: 41877

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.

Upvotes: -1

Matthew Scharley
Matthew Scharley

Reputation: 132534

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.

Upvotes: 5

cheeaun
cheeaun

Reputation: 1353

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

Upvotes: 0

Jason
Jason

Reputation: 411

This is difficult to achieve in HTML/CSS/JS for a reason (although I'm sure it's possible).

Newspapers use multiple columns to reduce the line width make text more readable. This is fine on paper because when you finish one column you flip your eye up to the beginning of the next.

On the web we use scrolling to allow text to continue past the bounds of the screen therefore don't need columns.

Upvotes: -1

Related Questions