To divide the big text into columns.

Question

Problem:

There is a big piece of the text:

<div class="cont">
    <p>
        Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
        totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, 
        explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur 
        magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia 
        dolor sit, amet,
    </p> 
    <p>
        consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam 
        aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit 
        laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea 
        voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas 
        nulla pariatur? At vero eos et 
    </p>
    <p>
        accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque 
        corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt 
        in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis 
        est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, 
        quo minus id, quod maxime placeat, 
    </p>
    <p>
        facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam 
        et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et 
        molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
         maiores alias consequatur aut perferendis doloribus asperiores repellat.
    </p>
    <p>
        Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
        totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta 
        sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia 
        consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui 
        dolorem ipsum, quia dolor sit, amet,
    </p> 
    <p>
        consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore 
        magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis 
        suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, 
        qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, 
        quo voluptas nulla pariatur? At vero eos et 
    </p>
    <p>
        accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque 
        corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique 
        sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem 
        rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi 
        optio, cumque nihil impedit, quo minus id, quod maxime placeat, 
    </p>
    <p>
        facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam 
        et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et 
        molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis 
        voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
    </p>
</div>

It is necessary: To divide it on two columns. On page it should be divided on two about identical (on height) columns.

If it is possible: at change of the sizes of the container of the text, a column should remain identical height. Whether probably to set number "n" - on how many columns to divide the big piece of the text. That is to divide the text into any number of columns.

Is available: php, xslt, css, pure javascript (without jQuey). What tool is better for using? As it to make, that the decision was сross browser compatible.

Answer 1

If you don't mind it not working in certain versions of IE, you can use the new CSS3 multi-columns, which are a piece of cake to implement, see:

http://www.css3.info/preview/multi-column-layout/

Answer 2

This is possible with some Javascript. I call the following algorithm Columns_Fit:

1. First find the column with the smallest height and the column with the greatest height.
2. Remove a word from the first paragraph of the greatest column that you found in step #1, and add that word to the smallest column that you found on step #1.
3. Compare the height of the two columns.
4. If their still different, repeat step #2.

That's the principle of the algorithm. You should repeat that for every column by "going to the middle" approach, for example:

<div id="col1"></div>
<div id="col2"></div>
<div id="col3"></div>
<div id="col4"></div>

The above columns are order from the smallest one (col1) to the highest one (col4). Start with col1 and col4, and perform on them Columns_Fit algorithm. Later, perform the Columns_Fit algorithm on the next two column: col2 and col3. This is why I call this approach "going to the middle".

Note that not all columns can be exactly equal in height, there should be a deviation in the height. The deviation is equal to the line height or greater than the line height. (deviation >= line height)

Interesting reference: Cross-Column Pull-Outs by Daniel M. Frommelt @ alistapart.com

Answer 3

I have found such reference.

The decision suits me. http://www.csscripting.com/css-multi-column/.

Took from here: http://www.alistapart.com/articles/css3multicolumn/.

Minus: js-file heavy enough.

One more decision (works with onResize too): http://randysimons.nl/125,english/129,multi-column-text/#paragraaf_1