Title: Listing Posts in Multiple Columns
Last modified: August 19, 2016

---

# Listing Posts in Multiple Columns

 *  Resolved [horizon70s](https://wordpress.org/support/users/horizon70s/)
 * (@horizon70s)
 * [17 years, 1 month ago](https://wordpress.org/support/topic/listing-posts-in-multiple-columns/)
 * I have created a template for a page, and in that page I want to incorporate 
   listing of posts in a category. I have stripped everything out except for just
   the link itself. I have around 100 posts in this particular category, and I don’t
   want it to list 100 times down the page. I wanted to list it in, say, 3 columns
   so it’s organized cleaner. I have tried countless CSS tricks the past couple 
   weeks and haven’t gotten it to work.
 * I was hoping someone has run into my problem and would have a solution that would
   work with dynamic content in WP.
 * This is the example I’m using currently to list the 100 posts down the page (
   with only one column):
 *     ```
       <div class="postarea">
   
       		<?php include(TEMPLATEPATH."/breadcrumb.php");?>
   
       			<!--The blog page template is currently set to show 5 posts.  Change showposts=5 to whatever number of posts you want to display.-->
       			<!--Replace cat=1 with the Category ID you want to display in this section. See the README file to learn how to locate the Category ID-->
   
       <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                <h1><?php the_title(); ?></h1>
   
                <?php the_content(__('Read more'));?><div style="clear:both;"></div>
   
                <?php endwhile; else: ?>
   
                <p><?php _e('Sorry, no posts matched your criteria.'); ?></p><?php endif; ?>
   
       		<ul class="column"> 
   
       	<?php $page = (get_query_var('paged')) ? get_query_var('paged') : 1; query_posts("cat=4&amp;showposts=999&amp;paged=$page"); while ( have_posts() ) : the_post() ?>
       					<li><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></li>
   
       			<?php endwhile; ?>
       		</ul>
       <div style="clear:both;"></div>
       			<p><?php posts_nav_link(); ?></p>
   
       		</div>
       ```
   
 * I have tested a ton of CSS tricks but they don’t appear to work. The one I’m 
   currently working with is:
 * [http://www.csscripting.com/css-multi-column/](http://www.csscripting.com/css-multi-column/)
 * And that is the CSS class column I’m using (<ul class=”column”>):
 *     ```
       ul {margin: 0; padding: 0; list-style: none;}
   
       .column {
       background-color: #fff;
       border-top: 1px solid #999;
       border-bottom: 1px solid #999;
       padding: 8px;
       }
   
       .column {
       /* the proper rules ready for future */
       column-count: 3;
       column-gap: 5px;
       column-rule: 1px dotted #999;
   
       /* Moz/Firefox rules */
       -moz-column-count: 3;
       -moz-column-gap: 5px;
       -moz-column-rule: 1px dotted #999;
   
       /* Safari &amp; Chrome rules */
       -webkit-column-count: 3;
       -webkit-column-gap: 5px;
       -webkit-column-rule: 1px solid #999;
       }
       ```
   
 * Any help would be greatly appreciated!

Viewing 5 replies - 1 through 5 (of 5 total)

 *  [Mark / t31os](https://wordpress.org/support/users/t31os_/)
 * (@t31os_)
 * [17 years, 1 month ago](https://wordpress.org/support/topic/listing-posts-in-multiple-columns/#post-1069567)
 * In any case you’ll have to count the results to correctly distribute the posts
   across the columns…
 * I’d not rely on the CSS to cut it just yet.
 * How about something like this?
 *     ```
       <div class="postarea">
       	<?php
       	include(TEMPLATEPATH."/breadcrumb.php");
       		if (have_posts()) {
       			while (have_posts()) : the_post(); ?>
       				<h1><?php the_title(); ?></h1>
       				<?php the_content(__('Read more'));?>
       				<div style="clear:both;"></div>
       	<?php
       			endwhile;
       		}
       		else { ?>
       			<?php _e('Sorry, no posts matched your criteria.'); ?>
   
       	<?php
       		}
       		$page = (get_query_var('paged')) ? get_query_var('paged') : 1;
       		$postcnt = 0;
       		query_posts("cat=4&amp;showposts=999&amp;paged=$page");
       		if (have_posts()) { ?>
       			<div class="example">
       			<ul class="somelist">
       			<?php
       			while ( have_posts() ) : the_post(); $postcnt++; ?>
       				<li><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></li>
       				<?php if($postcnt % 35 == 0) { ?>
       					</ul>
       					<?php if($postcnt % 105 == 0) { ?>
       						</div><div class="example">
       					<?php } ?>
       					<ul class="somelist">
       				<?php } ?>
       			<?php
       			endwhile; ?>
       			</ul>
       			</div>
       			<?php
       		} ?>
       	<div style="clear:both;"></div>
       	<?php posts_nav_link(); ?>
   
       </div>
       ```
   
 * Of course you’d need to create the CSS for .somelist and .example (rename as 
   you like).
 * Basically if the count hits a multiple of 35 the a new list is created, and if
   it its a mutliple of 105, then the DIV is closed a new one opened.
 * You basically end up with 3 lists consisting of 35 posts each inside a DIV element,
   when you reach that 105 marker the DIV is closed and another started for addition
   results…
 * Float the .somelist elements next to each other, and you effectively have 3 columns..
 * The `<ul>` elements could just as easily be table columns…
 * Not sure i’m very good at explaining but you might be able to take something 
   away from the above to expand on…
 * I think this depends if you have a set amount of posts to pull up or if you’re
   intending on having upto several hundred in the list…
 *  Thread Starter [horizon70s](https://wordpress.org/support/users/horizon70s/)
 * (@horizon70s)
 * [17 years, 1 month ago](https://wordpress.org/support/topic/listing-posts-in-multiple-columns/#post-1069791)
 * t31os_ – If you lived close enough I’d buy you a beer. 🙂
 * Thank you very much, I got it to work like a charm!
 *  [Mark / t31os](https://wordpress.org/support/users/t31os_/)
 * (@t31os_)
 * [17 years, 1 month ago](https://wordpress.org/support/topic/listing-posts-in-multiple-columns/#post-1069792)
 * Glad i could help.. 🙂
 * Of course once the CSS column commands become the norm things like this will 
   become a whole lot easier…
 * Be sure to mark the topic resolved matey … it’s to the right —>
 * 😉
 *  Thread Starter [horizon70s](https://wordpress.org/support/users/horizon70s/)
 * (@horizon70s)
 * [17 years, 1 month ago](https://wordpress.org/support/topic/listing-posts-in-multiple-columns/#post-1069797)
 * Got it – and you’re right about what’s to come with CSS. It’s too bad it’s that
   far out though.
 *  [jezthomp](https://wordpress.org/support/users/jezthomp/)
 * (@jezthomp)
 * [16 years, 7 months ago](https://wordpress.org/support/topic/listing-posts-in-multiple-columns/#post-1069893)
 * I have used this great bit of code for something i have been working on…
 *     ```
       <?php
   
       		$page = (get_query_var('paged')) ? get_query_var('paged') : 1;
       		$postcnt = 0; query_posts('cat=3,4,5,6');
       		if (have_posts()) { ?>
       			<div class="example">
       		<ul class="content_cols">
       			<?php
       			while ( have_posts() ) : the_post(); $postcnt++; $data = get_post_meta( $post->ID, 'key', true );?>
   
       				<li class="cat<?php $category = get_the_category(); echo $category[0]->cat_ID;?>">
   
       <h3><?php the_title(); ?></h3>
       <p><?php echo $data[ 'event_date' ]; ?></p>
       <p><?php echo $data[ 'event_location' ]; ?></p>
       <p><?php echo $data[ 'event_time' ]; ?></p>
       <p><a href="<?php the_permalink() ?>" title="View more details of <?php the_title(); ?>">Read More</a></p>
       <div class="clearFix"><!--x--></div>
       </li>
   
       				<?php if($postcnt % 6 == 0) { ?>
   
       					<?php if($postcnt % 6 == 0) { ?>
       					</ul>
       					<div class="line"></div>
       					<div class="clearFix"><!--x--></div>
       						</div>
   
       						<div class="example">
       					<?php } ?>
       					<ul class="content_cols">
       				<?php } ?>
       			<?php
       			endwhile; ?>
       			</ul>
       			<div class="clearFix"><!--x--></div>
       			</div>
       			<?php
       		} ?>
       ```
   
 * However, when i get to 24, 6 columns of 6 rows it prints a blank div.example,
   obviously i dont want a blank one at the end i just want it to stop printing 
   and cut off when it gets to 24 not include 1 more after.
 * Any ideas?

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Listing Posts in Multiple Columns’ is closed to new replies.

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 5 replies
 * 3 participants
 * Last reply from: [jezthomp](https://wordpress.org/support/users/jezthomp/)
 * Last activity: [16 years, 7 months ago](https://wordpress.org/support/topic/listing-posts-in-multiple-columns/#post-1069893)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics