Organising posts into side-by-side columns in WordPress

I have received many comments asking how to extend the earlier tutorial on How to organise posts into two side-by-side columns in WordPress to work with more than just two columns.

This can be done in a similar way by just editing two main files: index.php and style.css.

In index.php:

Before the WordPress Loop starts:
<?php $col = 0; $numcols = 3; ?>
Change numcols to another number if you want something other than 3 columns.

Just after the WordPress Loop:
<?php if ($ct && $ct%$numcols==0) echo '<div class="clearcol"></div>'; ?>
<div class="col">

Just before the end of the WordPress Loop:
</div>
<?php $ct++; ?>

Just after the end of the WordPress Loop:
<div class="clearcol"></div>

The exact code you need to add to style.css depends on how many columns you want, how much space you want between them, and how much width your theme allows for the posts.

For example, with the current WordPress Default theme, the width of the left column is 450px wide. If you wanted three columns, that’s 150px per column. If you also wanted 10px of spacing to the left and right of each column, that leaves a width of 130px for the post itself.

You would then need this code in style.css:
.clearcol {clear:both;}
.col {float:left;display:inline;width:130px;padding:0 10px;}

You’ll probably need to play around with these values until you get something that works.

The result for a 3-column WordPress Default theme can be seen here.