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.

JavaScript getElementsByClassName

Today I found myself writing a little bit of JavaScript to isolate an element on a page. The element in question looked something like this:

<div class="mulitcolumn">
    <p>Some text...</p>
    <p>Some more text</p>
<div>

I wanted to get the div element by searching for the class name multicolulmn. Without thinking, I began writing the code to grab the div using the getElementByClassName function. Then I remembered that getElementByClassName isn’t actually a built-in function. Oh well, Google to the rescue.

I was able to quickly find Robert Nyman’s elegant getElementsByClassName function in The Ultimate GetElementsByClassName.

Using this function, you can get elements like so (examples pulled from Nyman’s site):

// To get all a elements in the document with a “info-links” class.
getElementsByClassName(document, "a", "info-links");

// To get all div elements within the element named “container”, with a “col” and a “left” class.
getElementsByClassName(document.getElementById("container"), "div", ["col", "left"]);

I love it when I don’t have to write my own JavaScript.

CSS Internet Explorer Bugs

The other day I ran in to a bug in IE 6 that I had never encountered before. I had a left-floated content box with a margin of 105px on the left. Everything worked fine in the good browsers as usual, but when I checked IE 6, I noticed that the margin was off. No real surprise there. Upon further inspection, I noticed that the margin was more than just off, it was exactly double the actual margin.

After doing some research, I discovered that the bug has been well documented as the “Doubled Float-Margin Bug.” Position Is Everything has a good explanation:

This bug only occurs when the float margin goes in the same direction as the float and is trapped directly between the float and the inside edge of the container box. Any following floats with a similar margin won’t show the doubled margin. Only the first float in any given float row will suffer from the bug. Also, the doubled margin displays symmetry, working the same way to the right as it does to the left.

As it turns out, I didn’t even need to use their recommended fix for the bug. I was able to ax it by just adjusting which elements had the float and margins.

Position Is Everything also contains an entire section IE only bugs. I know this is going to be an invaluable reference for me when I’m trying to track down odd behavior that I’m sure is a bug and need an easy fix.

Blog Spoon Graphics Website

I stumbled across the Blog Spoon Graphics website the other day and was very impressed by the design.

Blog Spoon Graphics

I particularly like their notebook-style links. The subscribe link is a good example of this (although I can’t actually click on it):

Blog Spoons Gaphics Subscribe

Their site footer also demonstrates a nice use of the “crusty notebook page” style:

Blog Spoons Gaphics Footer

It’s a very nice looking site all around.

Tripoli CSS Rendering Foundation

David Hellsing has created a new CSS Rendering Foundation (if that confuses you, think framework) with cross-browser compatibility.

The CSS files basically include a global reset, generic styles, and a print stylesheet. There is also an IE stylesheet for specific IE bugs. The CSS files looks pretty good.

All of the typography is based on The Elements of Typographic Style:

Vertical rhythm, line-heights, margins and font sizes have been carefully selected to follow classic typographic guidelines from books like “The Elements of Typographic Style“. All measurements are set in em’s, so it’s very easy to do elastic and dynamic layouts while still keeping typographical proportions. Rules like font-size and font-family are set globally so you can easily override them with new values that suits your project without ruining the natural flow.

Even cooler, Tripoli also introduces the idea of using “plugs” to extend the generic base code:

One of the ideas behind Tripoli is to allow external plugs to extend the generic base. To demonstrate this, I have created a negative plug that changes all colors to prepare for a negative layout. Other plugs could be sidebars, menus, rounded boxes, code formatting and other helpful widgets.

The Tripoli site includes several examples of how it works. My particular favorite is the example where he takes a page from a W3C spec and completely restyles it (links to the changed styles at the top of the document):



appointive
appointive
appointive
appointive