CODEWITHSUNDEEP
htmlcsslayout
Johan
Johan

Reputation: 19082

Columns with CSS without using multiple divs?

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?

Upvotes: 1

Views: 522

Answers (2)

AaronSieb
AaronSieb

Reputation: 8266

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.

Upvotes: 2

G-Wiz
G-Wiz

Reputation: 7426

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.

Upvotes: 5

Related Questions