CODEWITHSUNDEEP
htmlcsslayoutstylesheet
Oli
Oli

Reputation: 16055

Newspaper style multiple-column text in html

I would like to display a text with several columns. The same way that it is displayed on a newspaper:

enter image description here

I know how to do that with tables of div but, in that case, I have to specify where the text is cut between the columns.

I saw a suitable solution by doing: <div style="column-count:2"> text </bla>

It works fine with opera but not with the latest firefox and chrome...

Upvotes: 2

Views: 4474

Answers (3)

字姓名
字姓名

Reputation: 436

it would be great if column-count worked on all major browser, but it doesn't. I would suggest you to try splitting the text on to parts using a programming language (like PHP) and insert them to each div. IN simple for it would look like this

<?php
$textLenght = strlen($text);
$part1 = substr($text, 0, $textLenght/2);
$part2 = substr($text, $textLenght/2);
?>

<div class="col1"><?php echo $part1 ?></div>
<div class="col2"><?php echo $part2 ?></div>

of course you should use more advenced algorithms to split the text.

Upvotes: 0

Undefined
Undefined

Reputation: 11431

You could also use float:left and float:right to make your columns for old browser support.

Although the text is stuck in each column and wont expand into the next one.

Upvotes: 0

Alex
Alex

Reputation: 9041

column-count is CSS3, so be warned it will not work in some older browsers.

To answer your question, you may need to be more specific with your css:

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

Upvotes: 7

Related Questions