FORMATTING TEXT TO AUTOMATICALLY FLOW EVENLY INTO MULTIPLE COLUMNS - Aug 3rd, 2010


One of the things that I’ve wanted to be able to do was to be able to make long blocks of text automatically flow
evenly into multiple columns.

Here’s one approach, that uses a combination of CSS and Javascript to handle the discrepancies in the current
implementation of the “proposed” CSS3 multi column rules.

It’s based on the examples shown in these articles:

http://www.alistapart.com/articles/css3multicolumn/

and

http://www.cvwdesign.com/txp/article/360/

So that I could follow the examples in the articles, I created:

A .css style sheet called multi-column.css
A Javascript file called css3-multi-column.js
And a sample page called column-sample.php
,
You can download the CSS, Javascript and sample files from

http://www.thecmsbcookbook.com/downloads/css3-multi-column.zip

Every implementation will be slightly different so I’d recommend playing with the different possibilities listed in
the article and in the proposed spec to get your page looking like you want it to.

Because of some conflict issues with the Javascript, you may get css conflicts if you use more than one set of column
classes in the same external css file, EVEN IF YOU NAME THE CLASSES DIFFERENTLY.

So either put the column formatting in the head your web page or create a totally different copy of the external .css
file for each pages that uses different parameters.

http://www.w3.org/TR/css3-multicol

Note that in this example, the Javascript is called only for IE, and the css style sheet contains -moz and -webkit-
prefixes for Mozilla and Safari.

That said, Here’s the pretty simple code that I used:

In the head section of my 2 column viewer (column sample.php), I called the javascript and CSS file with:



<link href="multi-column.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<script type="text/javascript" src="css3-multi-column.js"></script>
<![endif]-->



Then in the body, where I wanted to display the 2 column text, I enclosed it in a <div> tag. You can display multiple
fields in the same <div> and they’ll all flow into neat columns.



<div class="column" align="left">
<?php echo $yourRecord['your_field'] ?><br /><br /><hr width="200">
</div>



Since first writing this, I’ve been able to use the technique to create automatic flow in some pretty complex viewers,
so experiment and enjoy.



The materials on this web site have been created for use with CMS Builder content management software. CMS Builder software is published and licensed for use by InteractiveTools.com. Please contact Interactive Tools for information on the downloading of the software or the purchasing of licenses.


Terms of Service