Split multiple categories into two columns

Question

What is the best way to split multiple categories into two columns on the page?

At this moment I don't need category-A to go into column-1 and category-B/C/D to go into column-2. I just need multiple categories to spilt in to two columns irrespective of what they are.

the code for the page currently looks like:

<?php get_header(); ?>

<div id="articles-wrap" class="row span_9">
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

        <article <?php post_class() ?> id="post-<?php the_ID(); ?>">
            <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
            <?php include (TEMPLATEPATH . '/_/inc/meta.php' ); ?>
            <div class="entry">
                <?php the_content(); ?>
            </div>
            <footer class="postmetadata">
                <?php the_tags('Tags: ', ', ', '<br />'); ?>
                Posted in <?php the_category(', ') ?> | 
                <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?>
            </footer>
        </article>

        <?php endwhile; ?>
        <?php include (TEMPLATEPATH . '/_/inc/nav.php' ); ?>

    <?php else : ?>

        <h2>Not Found</h2>

    <?php endif; ?>
</div><!-- articles-wrap | row span_9 -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Thanks

Answer 1

CSS3 to the rescue!

#articles-wrap, .span_9 {
      -moz-column-count: 2;
      -moz-column-gap: 10px;
      -moz-column-rule: none;
      -webkit-column-count: 2;
      -webkit-column-gap: 10px;
      -webkit-column-rule: none;
    column-count: 2;
    column-gap: 10px;
    column-rule: none;
    }