**This is undergoing a reworking. There were some issues that needed to be handled. Please see the new working example. I am currently working on writing the revision.

The other day I was reading a post on Natalie Jost’s blog, Standards for Life. It actually dealt with the issue of using spans in order to make a multi-column list without breaking it up into two lists. Before I go on let me forewarn you. I know the code does not validate. I know it’s semantically incorrect. That is not the issue at hand. The idea is using spans floated left, to make multiple columns. With styles on, the lists are styled and placed 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 issue.

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.

- Steve Strutt

This is what I wanted to figure out how to do, and unless I am way off base, I think I figured it out.

I saw that Natalie was using Wordpress like myself so my example is altering Wordpress’s loop to present a two column list in this fashion.
Look here for a live example of the output.

The actual code that presents the list is as follows.

<?php $count = 0; ?>
<?php query_posts(''); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php $count++; ?>
<?php endwhile; endif; ?>
<?php $zo = $count/2; ?>
<?php $zoo = round($zo); ?>
<p>Post count: <?php echo $count ?><br>
zoo=<?php echo $zoo; ?><br>
zo=<?php echo $zo; ?></p>
<ol id="liz">
<span>
<?php $count = 0; ?>
<?php query_posts('posts_per_page='.$zoo); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php $count++; ?>
<li><a href='<?php the_permalink() ?>'><?php the_title(); ?></a></li>
<?php endwhile; endif; ?>
</span>
<span class="right">
<?php query_posts('offset='.$zoo); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php $count++; ?>
<li><a href='<?php the_permalink() ?>'><?php the_title(); ?></a></li>
<?php endwhile; endif; ?>
</span>
</ol>

I’m not sure if the first query_posts(”); is needed, but I left it in anyways. The lines that echo $count, $zoo and $zo to show the value of each variable being passed, these of course can come out upon utilization.

So I’ll try to use my limited knowledge of PHP to explain what is going on here.

<?php $count = 0; ?>
<?php query_posts(''); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php $count++; ?>
<?php endwhile; endif; ?>
<?php $zo = $count/2; ?>
<?php $zoo = round($zo); ?>

First thing we’re doing is setting the post count to 0 so it starts from the beginning. Then we tell Wordpress to look for all the posts. Now the first loop (not sure if it’s needed though), and then we count all of the posts. I ssing in laymens said I wasn’t a big PHP guy so I’m guessing in laymens terms on all that.

Now the part that took me a good bit of reading to figure out. The fact that it is math didn’t help.

We need to define variables. We have our total count so $zo = $count/2; says our variable zo is equal to half our total count. Now if we have an odd number, the math later on gets messed up so we use PHP’s round to round the output number. $zoo = round($zo); tells zoo to be equal to the rounded up output of zo. For instance, if we had 5 posts, zo would equal 2.5, but then we round that up so that zoo equals 3. This is our magic number for next step.

<ol id="liz">
<span>
<?php $count = 0; ?>
<?php query_posts('posts_per_page='.$zoo); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php $count++; ?>
<li><a href='<?php the_permalink() ?>'><?php the_title(); ?></a></li>
<?php endwhile; endif; ?>
</span>
<span class="right">
<?php query_posts('offset='.$zoo); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php $count++; ?>
<li><a href='<?php the_permalink() ?>'><?php the_title(); ?></a></li>
<?php endwhile; endif; ?>
</span>
</ol>

Now lets build the lists. I started the count back over so as to be able to run this twice on the same test page. query_posts(’posts_per_page=’.$zoo); again tells Wordpress to look for all the posts but this time only list the number of posts we define, in this case 3. That fills our first span. Then we query again but this time we say query_posts(’offset=’.$zoo); telling Wordpress to look for all posts but offset the result by three, thus the last 2 posts. That fills our next span. Then we close the list and call it done.

Notes on floating lists

Do not try and get cross browser reults if your floating <ol>. Firefox and Safari do it just fine. Opera takes each span full and starts it’s numbering at 1 and even using start=”#” doesn’t seem to fix it. IE6 and IE7 have each <li> starting from 1. Not good. Best to stick with an <ul>.

Now you could (but dont!) use <?php echo $count; ?> in front of each lists out put to number them and then use CSS to turn off list styles. Problem should be obvious though. Veiwing source, you’ll see two sets of numbers. With styles of you will as well. This is not good. A screen reader is going to hate that, not to mention the person using it.