Question

This may seem a little more complex than you first thought when clicking on this question.

I’m looking to create a really simple 2 column layout that can hold text. The issue is, the text is being imported via a Content Management System so this may be changed. The idea is to have a tag that can carry on the content on another column when it has used up all of it’s space.

<p>Content goes here ... for quite a while ... lorum ipsum would be better.</p>

|-------------|  |-------------|
| Content     |  | while ...   |
| goes here   |  | lorum ipsum |
| ... for     |  | would be    |
| quite a     |  | better.     |
|-------------|  |-------------|

So this rules out the float left/right feature as it contains two different columns when essentially, it needs to be one. Just split.

I have thought of using PHP’s strlen function to count the characters but as we all know, in different fonts, i is smaller than w meaning that the actual character count will not be at all in relation to the height of the content. And no, I cannot use a fixed width font. I have a feeling this will be the last resort but I hate giving up easily.

Any suggestions or ideas would be a great help. Thanks!

Answer 1

What you’re describing has already been implemented in CSS3 through the column-count property:

CSS:

p {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    -o-column-count: 2;
    column-count: 2;
}

Demo: http://jsfiddle.net/WDgsv/

If you’d like to support IE as well, use a JS polyfill: http://www.csscripting.com/css-multi-column/