CSS Columns

Despite the fact that CSS3 is going to solve this problem, I decided to post my method for creating purely HTML and CSS columns.

Basics of CSS columns (in plain English):

1. Create a sufficient number of columns.
2. Make each column a set height and width.
3. Put ALL the text in each column.
4. Move the text of each column upward to hide what was shown in the last column.

Technical Explanation:

1. Create a div tag for each column, all with the same style class.
2. Nest a p tag with the full text inside, each with a unique style class.
3. Set the div height and width in the stylesheet.
4. Set the div overflow to hidden.
5. Set each subsequent p margin-top to the cumulative height of all previous columns, but negative.

This effectively hides the previous columns' text in a hidden negative top-margin. The advantage of this approach is that if default font sizes on different browsers change the intended size of your text, it will still show/hide the appropriate amount of text in each column.

This can be accomplished more elegantly by using PHP or JavaScript, and referencing your body text with a variable placed inside each p tag.

To see a demo, go to www.thomasvirginart.com/columns.html. (special thanks to lipsum.com for the text!)

Enjoy!

~Tom