1

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?

Improve this question

2 Answers 2

Reset to default
5

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

This article (net.tutsplus.com/tutorials/html-css-techniques/…) shows how to do this using Mozilla- and WebKit-specific properties. For IE you'll need to wait for CSS3 support or use a script.
Nice link (item #9 is the relevant information). They also point out the columnize jQuery plugin. Aaron, you should make an answer with that link. =)
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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.