I was working on my Wordpress development blog today and in my contents I wanted to be able to list the items in columns instead of one long list. This would be fine for a <ul> but I’m using an <ol> because it makes more sense for a table of contents. The problem is, how do you split up the <ol> into 2 or 3 sections and still retain the count? Here’s how I did it.
I’ll do this one in only 2 columns.
- Sed vestibulum purus nec sapien.
- Donec a urna eget risus tempor.
- In volutpat egestas felis.
- Mauris porta interdum eros.
- Quisque et enim et risus aliquet luctus.
- Maecenas aliquam lacinia nisl.
- Pellentesque cursus hendrerit lacus.
- Vestibulum lacinia mattis enim.
First, the HTML
Put a <span> tag with a class of “column” around the list items you want to split (keeping the tags inside the ol tags). I use “column3″ for a 3-column layout.
<ol>
<span class="column">
<li>Sed vestibulum purus nec sapien.</li>
<li>Donec a urna eget risus tempor tincidunt.</li>
<li>In volutpat egestas felis.</li>
<li>Mauris porta interdum eros.</li>
</span><span class="column">
<li>Quisque et enim et risus aliquet luctus.</li>
<li>Maecenas aliquam lacinia nisl.</li>
<li>Pellentesque cursus hendrerit lacus.</li>
<li>Vestibulum lacinia mattis enim.</li>
</span>
</ol>
Now style the columns
.column {
display:block;
float:left;
width: 49%;
}
.column3 {
display:block;
float:left;
width: 33%;
}
That’s all. Back to work…






Matt left a comment on February 24, 2008 at 9:24 pm | #
Two ol elements with the second one having start=”5″ should also do the trick.
Natalie left a comment on February 24, 2008 at 9:30 pm | #
I didn’t know you could do that. Although… does that make sense to have two separate lists, even if one starts where the other left off? Unless for some reason you need content between them, like maybe a sentence introducing the second half of the list. But that’s not what’s happening here. This is actually all one list that just needs tolook different, so it would make more sense to leave it up to CSS to make that happen, right? I don’t know, maybe that’s a semantics question and maybe not all that important. Still, cool tip, thanks!
Nick Dunn left a comment on February 25, 2008 at 4:09 am | #
Nice try, but it’s invalid XHTML. Perhaps a standards-compliant solution is to add an extra list item with a CSS clear to force a new column? Non-semantic, but valid.
Natalie left a comment on February 25, 2008 at 9:03 am | #
Well, shoot, Nick, that was a bit rude. “Nice try”? Come on, why not “You idiot!” or “OMG that’s so lame.” :) I’m sure you’re a busy guy, much too busy to comment at all but just had to say something, but you could take a second to be a little more conversational and less antagonistic.
I get your point and I realize your perceived importance of validation over semantics, but honestly, really, is it the end of the world if a site doesn’t validate? Careful not to be “the —hole site validator](http://jeffcroft.com/blog/2008/feb/24/your-markup-validator/? I mean, I’ve got rounded corners using the invalid @-moz-border-radius@! Heavens to betsy, what? Yep, doesn’t validate, but it works and it makes sense presentation-wise - it’s all honest code.
I’m sorry, but I just don’t see how two separate lists in this instance makes as much sense as a couple of invisible spans when styles are off. Nice try. :P
'Mas left a comment on February 25, 2008 at 10:15 am | #
Natalie -
I like it. Seems more semantic to me to have the spans that would be transparent to a screen reader than to break up the list artificially with a different start to maintain the numbering sequence.
As far as validation goes, it’s a useful tool for uncovering markup mistakes while developing or after content changes, but it’s not the holy grail that semantic markup is, IMHO.
That’s my 2 cents :^{>
Natalie left a comment on February 25, 2008 at 10:26 am | #
**’Mas_* I’m glad you agree, thanks for “validating” me. Hahahaha. That joke just doesn’t get old.
Steve Strutt left a comment on February 25, 2008 at 11:18 am | #
Nice trick. (I mean that genuinely, not as an attack!) I find value in validation in cases where XHTML is used (more so than cases where HTML is used — you won’t be applying XSLT transformations on a HTML document), so I doubt I will be using this. Aligning text in columns is a tricky thing to do when you’re trying to separate presentation and document structure.
For instance, what happens when you suddenly need to add 8 more list items. You’d have to change the document structure to make sure an even number of items is in each span. Kind of a pain when you’re dealing with a CMS.
I do look forward to seeing more thoughts on the issue though.
Natalie left a comment on February 25, 2008 at 12:19 pm | #
:) Hey Steve. I don’t dispute the value of validation in general and it’s awesome when a site completely passes validation. That’s a good point about adding more. That would be a problem no matter which way you set up the list (new start # or spans). In my case I have set categories so I probably won’t need to add any more, and the list isn’t dynamic so it won’t change on its own, but in some cases where a list does change dynamically by a CMS I wouldn’t want to use this “trick”. I know there’s a javascript solution to this but I can’t recall it off-hand.
Alan left a comment on February 25, 2008 at 7:20 pm | #
Not all all. I came here after reading your post on Jeff Crofts’ site. I tried to find another, valid, semantic solution to no avail. I had completely mixed results in 5 browsers. Tossing in a few spans to alter the styled presentation is not the end of the world. After playing with it what happened? I reverted back to the way you had originally done it. On screen it looks and performs as intended. With styles off it does performs that way. Will a screen reader care that there a some spans tossed in? Nope.
I like your solution and like that, although it doesn’t validate, it still performs correctly.
Natalie left a comment on February 25, 2008 at 7:42 pm | #
Hey**Alan_*, I’m glad to hear you actually tried it out! I admit, I didn’t actually do any testing on this. I often don’t unless it’s for a client, so I’m really glad to hear it worked for you! :)
tugbucket :: words and works of Alan Jackson » Blog Archive » Two column lists in Wordpress left a comment on February 27, 2008 at 1:02 pm | #
[...] correctly. With styles off, the user is still presented with a complete and functional list. Read Breaking up a list in columns to see the [...]
Alan left a comment on February 27, 2008 at 1:22 pm | #
Natalie,
I just could let tis one go. I made a modification to the loop in Wordpress to generate 2 column lists. The left will always have the left over item in case of odd numbers. That should satisfy the generated list question.
“Two column lists in Wordpress](http://tugbucket.net/wordpress/two-column-lists-in-wordpress/
Hope that works. Not familiar with Texttile yet.
best,
Alan
Natalie left a comment on February 27, 2008 at 2:38 pm | #
Hey**Alan_*, I saw your post, that’s awesome. I was thinking though… if you’re doing it with posts, I thought about it this way. What about 2 loops like this:
That’s REALLY basic, but would something like that work? You’d have to have a set number of posts, but usually that doesn’t change, right?
Shimon left a comment on February 27, 2008 at 5:33 pm | #
Hi, Natalie
I don’t want to correct you at all. Also I think you’ve read this before.
You just reminded me another “article on multicolumn list](http://www.alistapart.com/articles/multicolumnlists from ALA, which gives an overview of different ways to make list have columns.
Regards!
Natalie left a comment on February 27, 2008 at 5:45 pm | #
Ha!**Shimon_* that’s exactly what I was looking for and couldn’t find it, so I ran with my own “hack”. Thanks for the link! It’s much more useful than my crappy little post. ;)
Joe Clark left a comment on February 29, 2008 at 7:43 am | #
If you were going to use invalid HTML to accomplish this task, DIV wraps block-level elements like LI; SPAN does not.
What we’re trying to tell you is we don’t want you to use invalid HTML.
Natalie left a comment on February 29, 2008 at 10:04 am | #
Well. Joe Clark. Fancy meetin’ you here. :) I absolutely get that point, and I admitted I never tested this across browsers and I didn’t even try to validate it until someone called it invalid. The reason was because this was going on a personal blog which, though I’ve shared, is not designed for anyone but me. I had never intended to use this technique on a public site and was suggesting it with that in mind.
So here are some of my questions following this surprising controversial span topic.
My point here isn’t to down-talk web standards, validation, accessibility, any of that. I guess I’m concerned with a couple of things.
I was simply trying to achieve a small bit of compromise in a sticky situation, giving an added element to split up the list while keeping it readable, accessible, all that when styles are off. I realize divs would have been more valid, but they would have broken the list and made everything look/behave wrong, so the best option obviously is to do nothing here — which is what I have always and will continue to do for clients and other public web sites. But, if you don’t have a problem with some occasional invalidation — on a personal site — I don’t see anything wrong with doing something like this.
Michael Montgomery left a comment on March 1, 2008 at 7:26 am | #
Whenever someone says to me “it doesn’t validate”, I choose not to interpret that as “…so it’s bad/wrong/worthless/and you’re a bad designer/person/etc.”
Rather, what I hear is “Assuming we all care about validation, I’m trying to help by letting you know.”
This reflects a commitment to quality, not necessarily a personal criticism.
So it is similar to conversations about whether something is accessible, readable, usable, has sufficient contrast for the color-blind, or the layout breaks in a certain browser(s), or any other challenges of which I may not be aware.
In each case, I want to know about any challenges with my site, and I can decide what to do about it.
Natalie left a comment on March 1, 2008 at 7:49 am | #
Michael, that’s not the way I take it but that’s not even the issue. The thing so many people are talking about is this:
It’s the same thing with Christianity, Michael, really. How many times do I need to justify myself as a Christian and what kind of Christian goes around pointing out the mistakes of fellow brothers and sisters a) without solicitation and b) in front of the world for others to see? I don’t want this kind of “Christian” anywhere near me and nor do I want “standardistas” nipping at my heels telling me where [they think] I’m failing as a standardista myself.
Can you imagine someone saying to a fellow Christian “Your behavior is invalid and you can’t call yourself a real Christian until you fix it.”?
And again, my sites typically validate and how many ways can I say it, I’m not against validation or people privately and politely pointing out a mistake I might not know about, but my issue here is a) why do you care what I do on my personal site that’s just for me, and b) all other things passing (accessibility, usability, browsers, colors, etc), is it the end of the world if a site doesn’t validate for something as minor as a couple of spans in a list? Do people even look at WHY a site doesn’t validate? I think most people just see that red bar and run off to cry foul before giving any consideration to the reality that some sites just don’t validate. For example… I’m still trying to get the
tags out of my excerpts because until I do my site won’t validate because the excerpt is inside a link. But sure enough, some bozo is going to comment/email/call to tell me how I should just shut up about standards until I get my act together and validate my site. [sigh]Sunday Weekly Roundup #21 - 03/09/2008 » Blog at veanndesign.com left a comment on March 9, 2008 at 4:00 pm | #
[...] Break up a list in columns [...]