Multi Columns in websites

For the past couple of months I’ve been working on creating a new website that uses WordPress as a CMS for the organization Girls Get Connected (That’s the old site, because the new one isn’t quite done yet). The project has been a great one to work on because I’ve gotten to do everything including the design of the site and development of the WordPress back-end and templates.

Early on in the project, after the design mockup had been approved, I knew there were going to be some difficulties implementing it. One of the things that I knew would be a problem was the fact that I had designed a rather prominent section on the home page of the site which called for an article to be split into multiple columns. This being a content managed site, I also knew it wasn’t really going to be an option to ask the end users to break up their articles into two even sections so that it would make nice and pretty columns. Also, CSS3 really wasn’t an option, since this site would have to work on all current browsers. Something else would have to be done.

The solution I ended up using was a very elegant JavaScript program written by Randy Simons. The script is called Multi-Column Text and is pretty easy to implement. It automatically splits the text into multiple columns (you chose how many), and includes support for liquid layouts. This means that the content and columns aren’t static; they will automatically adjust as the page is resized. Check out the demonstration page to see what I mean. This script is also works on enough old browsers to actually be usable.

What impressed me most about the script was that it requires very little extra markup. Assuming all of your markup is in some sort of standards compliant state, all that is required is one (or possibly two) extra div tags. Say you wanted to make the following code segment use the multicolumn script:

<h2>Maecenas</h2>
<p>Pellentesque mi. In lacinia iaculis ante.</p>
<h1>Ut dapibus</h1>
<p><em>Nunc non dui.</em> Maecenas quis lacus sed dui commodo elementum.</p>
<p><strong>Pellentesque rhoncus sollicitudin libero. Phasellus nunc risus, tincidunt vel, bibendum eu, molestie ac, tortor. Etiam in felis.</strong></p>
<p><strong><em>Pellentesque id erat. Mauris condimentum pharetra nibh. Fusce sollicitudin auctor tortor. Aliquam placerat,</em></strong></p>

All that needs to be added are two div tags to wrap the content. The first div must also include an id or class name for the JavaScript to hook to. You can use whatever class or id name you want when you implement it. I chose to use id=multicolumn. The finished markup would look like this:

<div class="multicolumn">
  <div>
    <h2>Maecenas</h2>
    <p>Pellentesque mi. In lacinia iaculis ante.</p>
    <h1>Ut dapibus</h1>
    <p><em>Nunc non dui.</em> Maecenas quis lacus sed dui commodo elementum.</p>
    <p><strong>Pellentesque rhoncus sollicitudin libero. Phasellus nunc risus, tincidunt vel, bibendum eu, molestie ac, tortor. Etiam in felis.</strong></p>
    <p><strong><em>Pellentesque id erat. Mauris condimentum pharetra nibh. Fusce sollicitudin auctor tortor. Aliquam placerat,</em></strong></p>
  </div>
</div>

I like the way that looks: clean and simple. You can even use this in in a WordPress template with PHP tags included and everything still works. This is what is actually coded into one of my WordPress template files:

<div class="multicolumn">
  <div>
    <?php ggc_the_long_excerpt(); ?>
    <p class="readmore"><a href="<?php the_permalink() ?>" rel="bookmark" title="Continue Reading <?php the_title_attribute(); ?>">Read More &raquo;</a></p>
  </div>
</div>

My favorite part is what happens when Javascript is not available. In my case, the page still works fine and no content is lost. Sure, there are some rather long line lengths, but everything still works.



appointive
appointive
appointive
appointive