Columns with CSS without using multiple divs?

Question

I want to get 4 columns, with the text floating in all of them. I don't want to make 4 separate divs, because when the first column if full of text, the text should continue in the next column.

I also want to set the width of each column and the padding between. Additionally, the height should be flexible, depending on how much text there is.

Do you have any ideas?

Answer 1

This is very difficult to achieve, and is not how HTML is designed. The recommend approach would be to render all the text in a single HTML element (div or p, etc) and in the browser, dynamically alter the content and markup with respect to a pre-determined "preferred height" and number of columns. You can use the height() methods of jQuery to assist you in this.

Here is a script with some of the groundwork.

An article explaining future support available in CSS3.

Answer 2

This article (11 Classic CSS Techniques Mad Simple With CSS3) shows how to do this using Mozilla- and WebKit-specific properties. Columns like these are item number 9 on the list.

For IE you'll need to wait for CSS3 support or use a script, such as the Columnize jQuery plugin mentioned in the article.