How do I overflow the contents of a column into the next column using CSS?

Question

I have a table with three columns in which I'm trying to get some long paragraphs to flow dynamically from the first column into the second and then into the third. Currently, the table will continue on a next page when the first column overflows instead of moving into the second column and so I get several pages filled with only a single column's worth of data. How can I fix this?

Answer 1

It can be done with CSS3 but most browsers does not support those properties yet. Link here: Multi-column layout

There is also a jQuery plugin for this. http://code.google.com/p/js-columns/

EDIT 2016 The column-count CSS property for multi-column layouts is supported by all major browsers (http://www.w3schools.com/css/css3_multiple_columns.asp).

Demo:

.newspaper {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-count property.</p>

<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>