The print industry has had columns for years, and web designers have looked at those publications with envy. Narrow columns make it easier for readers to read your content, and with displays getting wider, developers are looking for ways to preserve comfortable column widths. After all, nobody wants to follow multiple lines of text across the monitor any more than they want a line of text to flow across the whole page of a newspaper. There have been some pretty clever solutions in the past ten years, but none of those solutions are as simple and easy as the method provided by the CSS3 specification.
Splitting Columns
Each month, AwesomeCo publishes a newsletter for its employees. The company happens to use a popular web-based email system. Emailbased newsletters don’t quite look good and are very hard to maintain. They’ve decided to put the newsletter on the intranet site and are planning to just send emails to employees with a link to pull up the newsletter in their browsers. For a mocked-up version of this new newsletter, see Figure 4.4, on the following page.
The new director of communications, who has a background in print publications, has decided that she would like the newsletter to look more like an actual newsletter, with two columns instead of one.
If you’ve ever tried to split some text into multiple columns using divs and floats, you know how hard that can be. The first big hurdle you run into is that you have to manually decide where to split the text. In publishing software such as InDesign, you can “link” text boxes together so that when one fills up with text, the text flows into the linked text area. We don’t have anything quite like that on the Web just yet, but we have something that works really well and is quite easy to use. We can take an element and split its contents into multiple columns, each with the same width.
We’ll start with the markup for the newsletter. It’s fairly basic HTML. Since its content will change once it’s written, we’re just going to use placeholder text for the content. If you’re wondering why we’re not using
the new HTML5 markup elements like section and such for this newsletter, it’s because our fallback method isn’t compatible with those elements in Internet Explorer.
<body>
<div id=”header”>
<hl>AwesomeCo Newsletter</hl>
<p>Volume 3, Issue 12</p>
</div>
<div id=”newsletter”>
<div id=”director_news”>
<div>
<h2>News From The Director</h2>
</div>
<div>
<P>
Lorem ipsum dolor…
</p><div>
<h4>Being Awesome</h4>
<P>
"Lorem ipsum dolor sit amet…"
</p>
</div>
<P>
Dui s aute i rure…
</p>
</div>
</div>
<div id=”awesome_bits”>
<div>
<h2>Quick Bits of Awesome</h2>
</div>
<div>
<p>
Lorem ipsum…
</p>
<p>
Dui s aute i rure…
</p>
</div>
</div>
<div id=”birthdays”>
<div>
<h2>Bi rthdays</h2>
</div>
<div>
<p>
Lorem ipsum dolor…
</p>
<p>
Dui s aute i rure…
</p>
</div>
</div>
</div>
<div id=”footer”>
<h6>Send newsworthy things to
<a href=”mailto :news@aweseomco.com”>news@awesomeco.com</a>.
</h6>
</div>
</body>
To split this into a two-column layout, all we need to do is add this to our style sheet:
#newsletter{
-moz-column-count: 2;
-webkit-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
-moz-column-rule: lpx solid #ddccb5;
-webkit-column-rule: lpx solid #ddccb5;
Now we have something much nicer, like you see in Figure 4.5. We can add more content, and the browser will automatically determine how to split the content evenly. Also, notice that the floated elements float to the columns that contain them.
Can I Specify Different Widths for Each Column?
Nope. Your columns must each be the same size. I was a little surprised too at first, so I double-checked the specification, and at the time of writing, there was no provision for specifying multiple column widths.
However, when you think about how columns are traditionally used, it makes sense. Columns are not meant to be a hack to easily make a sidebar for your website any more than tables
are. Columns are meant to make reading long areas of text easier, and equal width columns are perfect for that.
Falling Back
CSS3 columns don’t work in Internet Explorer 8 and older, so we’ll use the j Query Columnizer plug-in5 as a fallback. Columnizer will let us split our content evenly by simply using code like this:
$(“#newsletter”).columnize({ columns: 2 }) ;
People without JavaScript are going to be stuck with a single column of text, but they’ll still be able to read the content, because we marked it up in a linear fashion, so we have them covered. However, we can use JavaScript to detect browser support for certain elements. If we
retrieve a CSS property that exists, we’ll get an empty string. If we get a null value back, we don’t have that property available.
<script charset=”utf-8″ src=’http://ajax.googleapis.eom/ajax/libs/jquery/l.4.2/jquery.min.js’
type=’text/javascript’>
</scri pt>
<scri pt
charset=”utf-8″
src=”javascri pts/autocol umn . j s”
type=’text/j avascri pt’ >
</scri pt>
<script type=”text/javascript”>
function hasColumnSupportO{
var element = document.documentElement;
var style = element.style;
if (style){
return typeof style.columnCount == “string” ||
typeof style.MozColumnCount == “string” ||
typeof style.WebkitColumnCount == “string” ||
typeof style.KhtmlColumnCount == “string”;
}
return nul1 ;
$(function(){
if C! hasCol umnSupportO) {
$C”#newsletter”).columnize({ columns: 2 });
}
});
</scri pt>
We simply check for column support, and if none exists, we apply our plug-in.
Refresh the page in Internet Explorer, and you’ll now see your twocolumn newsletter. It may not be perfect, as you can see in Figure 4.6, on the preceding page, so you’ll need to use a little CSS or JavaScript to fix any elements that don’t quite look right, but I’m leaving that exercise up to you. Take advantage of conditional comments like we used in Section 7, Use JavaScript, on page 81 to target specific versions of Internet Explorer if needed.
Separating your content into multiple columns can make your content easier to read. However, if your page is longer, your users might find it annoying to have to scroll back to the top to read the columns. Use this with care.