Okay, so I know we have the CSS3 multiple column layout “columns” property in the newest browsers, but working in public institutions where we are expected to support IE as far back as version 8 or sometimes 7 (in the very rare case even 6 still), we cannot rely on the columns property… yet.
Context
Other than support for older browsers, you might also have content creators asking for the ability to create columns, but as non-admins they don’t have the ability to just add a style tag with CSS in the CMS editor, or perhaps they just don’t understand how to do it. To this day, I still sometimes struggle with the box model, so how can I expect the rest of the department to understand it?
What I propose would require that you teach staff who want/need to play with the layout of the page to go into the ‘source’ or ‘text’ (non-WYSIWYG) view and add tags with classes. They only really need to understand that at the beginning of a column, they would add a <div> tag with a class attribute and end the column with a closing </div> tag.
The Code
The code is actually very simple. It’s just a matter of splitting the classes in such a way that makes it easy to interchange and using words that makes them easy to remember and understand.
[code language=”css”].column {
padding: 1em 2%;
float: left;
}
.full {
width: 95.5%;
}
.half {
width: 45.5%;
}
.twothirds {
width: 61.5%;
}
.onethird {
width: 28.9%;
}
.quarter {
width: 20.5%;
}[/code]
So just add the code to your site’s CSS file.
User Documentation
I also made the user documentation fairly simple. I did assume that the staff using it had at least a basic understanding of how HTML works.
The following explains how to separate your content into multiple columns.
At the beginning of each column, add <div class=”[column size] column”> and end each column by closing the div, </div>.
To adjust the width, replace the [column size] with one of the following:
- full = ~100%
- half = ~50%
- twothirds = ~66%
- onethird = ~33%
- quarter = ~25%
Example:
[code language=”html”]<div class="half column">
your content in a column that is the width of half of the page
</div>[/code]
For the users that have that basic understanding of HTML, this should easy for them. The size classes can actually be used for anything, but since I typically have to teach WordPress and images are handled through the media library, I didn’t see any other case where they would need these classes.
A simple, but powerful thing to give content creators the ability to play around with the layout themselves!
We use a similar grid here. I might add to the code a couple of classes like .first {} and .last {} that eliminates the alternately left and right margins so, say, the columned content remains flush with content above or below. Otherwise the columns may look indented in the larger content, which may be mistaken for a blockquote (or just look odd).
If someone used this, it might look like
With floats, too, if the columns do exist in a larger page with non-columned content above or below, one might add a .clearfix {} class.
My clearfix is a bit overkill, but when you’re supporting old stuff you can never be sure.
The problem with a clearfix is that you would have to explain to a user when to add it (and that’s not always easy). Instead, I taught my staff to use the full (column) class for the content before and after. This would also eliminate the need for first/last. The version I used for the website was responsive too, so it meant less CSS rewrites if I kept the padding/margin the same for all of the columns.
In the latest version, I didn’t actually write it for our website, but for a teaching exercise, so I opted to keep it as simple as possible as well.
Thanks for the comment though. Definitely got me thinking.
Woops! Obviously the code I embedded didn’t workout. #needcoffee