Title: Posts in three columns
Last modified: August 19, 2016

---

# Posts in three columns

 *  [sachein](https://wordpress.org/support/users/sachein/)
 * (@sachein)
 * [16 years, 3 months ago](https://wordpress.org/support/topic/posts-in-three-columns/)
 * I want to have three columns instead of two.
 * What do I change?
 *     ```
       <table cellpadding="10" cellspacing="10" border="0">
           <?php $column = 1; ?>
           <?php // The LOOP. Do this for all posts:
           while (have_posts()) : the_post(); $postcount++; ?> 
   
               <?php if ($column == 1) echo "<tr>"; ?>
   
               <td class="column<?php echo $col;?>" style="vertical-align: top">
   
       			<div class="post" id="post-<?php the_ID(); ?>">
   
       				<h1><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
   
       				<div class="descr"><?php the_time('l, F jS Y, G:i a T') ?></div>
   
       	<div class="entry">
   
                             <?php the_content('Read the rest of this entry &raquo;'); ?>
   
       				</div>
   
       			</div>
   
               </td>
   
               <?php if ($column == 2) echo "</tr>"; (($column==1) ? $column=2 : $column=1); ?>
   
           <?php // END of the LOOP
           endwhile; ?>
       </table>
       ```
   
 * Also I want the post to go down than to the side.
 * e.g.
 * 1 2
    3 4 5 6
 * I want:
 * 1 4
    2 5 3 6

Viewing 15 replies - 1 through 15 (of 18 total)

1 [2](https://wordpress.org/support/topic/posts-in-three-columns/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/posts-in-three-columns/page/2/?output_format=md)

 *  [kz](https://wordpress.org/support/users/kz/)
 * (@kz)
 * [16 years, 3 months ago](https://wordpress.org/support/topic/posts-in-three-columns/#post-1364686)
 * Something like this should work for you:
 *     ```
       <table cellpadding="10" cellspacing="10" border="0">
       <?php
       $col = $row = 0;
       $rows_per_column = 3;
       $rows = array();
       while (have_posts()) : the_post();
         if($row >= $rows_per_column){
       	$row = 0;
       	$col++;
         }
         $rows[$row++] .= '
         <td class="column' . $col . '" style="vertical-align: top">
         <div class="post" id="post-' . get_the_id() . '">
       	<h1><a href="' . get_permalink() . '" rel="bookmark" title="' . get_the_title() . '">' . get_the_title() . '</a></h1>
       	<div class="descr">' . get_the_time('l, F jS Y, G:i a T') . '</div>
       	<div class="entry">
       	  ' . get_the_content('Read the rest of this entry &raquo;') . '
       	</div>
         </div>
         <td>';
       endwhile;
       echo '<tr>' . implode('</tr><tr>', $rows) . '</tr>';
       ?>
       </table>
       ```
   
 *  Thread Starter [sachein](https://wordpress.org/support/users/sachein/)
 * (@sachein)
 * [16 years, 3 months ago](https://wordpress.org/support/topic/posts-in-three-columns/#post-1364728)
 * Hi kz,
 * Thanks for the reply.
 * I just need two changes.
 * 1) I don’t want the posts to go down instead just sideways.
 * e.g.
 * 1 2 3
    4 5 6 etc
 * Sorry about that, it’s because I changed the layout.
 * 2) The thumbnails isn’t showing. I use this plugin: _Thumbnail for Excerpts_
 *  [kz](https://wordpress.org/support/users/kz/)
 * (@kz)
 * [16 years, 3 months ago](https://wordpress.org/support/topic/posts-in-three-columns/#post-1364741)
 *     ```
       <table cellpadding="10" cellspacing="10" border="0">
       <?php
       $col = 0;
       $cols_per_row = 3;
       while (have_posts()) : the_post();
         if($col == 0) echo '<tr>';
         ?>
         <td class="column'<?php echo $col; ?>" style="vertical-align: top">
         <div class="post" id="post-'<?php the_ID(); ?>'">
       	<h1><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
       	<div class="descr"><?php the_time('l, F jS Y, G:i a T'); ?></div>
       	<div class="entry">
       	  <?php the_content('Read the rest of this entry &raquo;'); ?>
       	</div>
         </div>
         <td>
         <?php
         if($col++ >= $cols_per_row){
       	$col = 0;
       	echo '</tr>';
         }
       endwhile;
       ?>
       </table>
       ```
   
 *  Thread Starter [sachein](https://wordpress.org/support/users/sachein/)
 * (@sachein)
 * [16 years, 3 months ago](https://wordpress.org/support/topic/posts-in-three-columns/#post-1364746)
 * Thanks kz,
 * When I added the code, there was 4 columns
 * But I changed it from:
 *     ```
       <?php
       $col = 0;
       $cols_per_row = 3;
       while (have_posts()) : the_post();
       ```
   
 * _to_
 *     ```
       <?php
       $col = 0;
       $cols_per_row = 2;
       while (have_posts()) : the_post();
       ```
   
 * And it works.
 * Thank you very much.
 *  Thread Starter [sachein](https://wordpress.org/support/users/sachein/)
 * (@sachein)
 * [16 years, 3 months ago](https://wordpress.org/support/topic/posts-in-three-columns/#post-1364749)
 * If possible,
 * How do you remove the gap between the posts.
 * [This is an example I found](http://www.tamileelamonline.com/wp-content/uploads/gaps.png)
 *  [kz](https://wordpress.org/support/users/kz/)
 * (@kz)
 * [16 years, 3 months ago](https://wordpress.org/support/topic/posts-in-three-columns/#post-1364755)
 *     ```
       <?php
       $col = 0;
       $col_count = 3;
       $cols = array();
       while (have_posts()) : the_post();
         if($col >= $col_count) $col = 0;
         ob_start();
         ?>
         <div class="post" id="post-'<?php the_ID(); ?>'">
       	<h1><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
       	<div class="descr"><?php the_time('l, F jS Y, G:i a T'); ?></div>
       	<div class="entry">
       	  <?php the_content('Read the rest of this entry &raquo;'); ?>
       	</div>
         </div>
         <?php
         $output = ob_get_contents();
         ob_end_clean();
         $cols[$col++] .= $output;
       endwhile;
       ?>
       <div class="columns">
       <?php
       foreach($cols as $key => $col)
         echo '<div class="column column' . $key . '">' . $col . '</div>';
       ?>
       </div>
       ```
   
 * style.css
 *     ```
       .columns{
       overflow:hidden;
       zoom:1 /* ie6 */
       }
       .columns .column{
       float:left;
       width:33%;
       }
       ```
   
 *  [cfhjag](https://wordpress.org/support/users/cfhjag/)
 * (@cfhjag)
 * [16 years, 2 months ago](https://wordpress.org/support/topic/posts-in-three-columns/#post-1364957)
 * Thank you so much for this post! Really helped me alot!
    I modified it and used
   5 coloumns instead though
 * <?php
    $col = 0; $cols_per_row = 4; while (have_posts()) : the_post(); if($col
   == 0) echo ‘<tr>’; ?>
 * works fine!
 * I just wonder if there’s a way to insert a line that would sit under each group
   of 5 posts. To seperate the rows from each other?
 * Also, how can I change the width of the posts?
    (update:just fixed this one myself)
 * One last thing, how can I limit the number of posts on the main page, index page?
 * Thank you so much for great support feedback!
    H
 *  [cfhjag](https://wordpress.org/support/users/cfhjag/)
 * (@cfhjag)
 * [16 years, 2 months ago](https://wordpress.org/support/topic/posts-in-three-columns/#post-1364958)
 * I sorted the number of posts out as well! The only question left is how to create
   a line that would sit between the rows of posts. I’ve got 5 on each row and under
   those I’d like a line to separate them from the ones beneath.
 * Thank you all!
    H
 *  [pisosse](https://wordpress.org/support/users/pisosse/)
 * (@pisosse)
 * [16 years, 2 months ago](https://wordpress.org/support/topic/posts-in-three-columns/#post-1364960)
 * Wonder if you could get a post to set in a specific column by catagory or author?
 * I mean getting all post within catagory a to be placed in column 1 and all posts
   in catagory b in column 2 ect. ect..
 *  [Richard B](https://wordpress.org/support/users/richard-b/)
 * (@richard-b)
 * [16 years, 1 month ago](https://wordpress.org/support/topic/posts-in-three-columns/#post-1364976)
 * How would you get this version of the code to list the posts down the columns
   rather than across? like the first tabled version?
 *     ```
       <?php
       $col = 0;
       $col_count = 3;
       $cols = array();
       while (have_posts()) : the_post();
         if($col >= $col_count) $col = 0;
         ob_start();
         ?>
         <div class="post" id="post-'<?php the_ID(); ?>'">
       	<h1><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
       	<div class="descr"><?php the_time('l, F jS Y, G:i a T'); ?></div>
       	<div class="entry">
       	  <?php the_content('Read the rest of this entry &raquo;'); ?>
       	</div>
         </div>
         <?php
         $output = ob_get_contents();
         ob_end_clean();
         $cols[$col++] .= $output;
       endwhile;
       ?>
       <div class="columns">
       <?php
       foreach($cols as $key => $col)
         echo '<div class="column column' . $key . '">' . $col . '</div>';
       ?>
       </div>
       ```
   
 *  [Michael](https://wordpress.org/support/users/alchymyth/)
 * (@alchymyth)
 * [16 years, 1 month ago](https://wordpress.org/support/topic/posts-in-three-columns/#post-1364977)
 * this hould work and display three columns, posts going down the columns:
    (different
   approach than your example)
 *     ```
       <?php $count = 1;
       $col_count = 3;
       $num_of_posts = $wp_query->post_count;
       $post_per_column = ceil($num_of_posts / $col_count); ?>
       <div id="col1">
       <?php while (have_posts()) : the_post(); ?>
   
         <div class="post" id="post-<?php the_ID(); ?>">
       	<h1><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
       	<div class="descr"><?php the_time('l, F jS Y, G:i a T'); ?></div>
       	<div class="entry">
       	  <?php the_content('Read the rest of this entry &raquo;'); ?>
       	</div>
         </div>
   
         <?php if($count == $post_per_column) { echo '</div><div id="col2">'; }
         if($count == 2*$post_per_column) { echo '</div><div id="col3">'; }
         $count++;
         endwhile;
       ?>
       </div><!--end #col3 -->
       ```
   
 *  [Richard B](https://wordpress.org/support/users/richard-b/)
 * (@richard-b)
 * [16 years, 1 month ago](https://wordpress.org/support/topic/posts-in-three-columns/#post-1364978)
 * hey thanks!! that works but the posts still go across the columns rather than
   down
 *  [Michael](https://wordpress.org/support/users/alchymyth/)
 * (@alchymyth)
 * [16 years, 1 month ago](https://wordpress.org/support/topic/posts-in-three-columns/#post-1364979)
 * forgot to give you the essential css styles:
 *     ```
       #col1, #col2, #col3 { float:left; width:30%; margin-right:10px;  }
       #col1 { clear:left; }
       #col3 {margin-right: 0px; }
       ```
   
 * you may have to play with width and margin values to get it looking how you want
   it.
 * 3 times width plus 2 times margin-right has to be less than the available space.
 *  [Richard B](https://wordpress.org/support/users/richard-b/)
 * (@richard-b)
 * [16 years, 1 month ago](https://wordpress.org/support/topic/posts-in-three-columns/#post-1364980)
 * Thanks again! Hey thats working great! many thanks
 *  [quemultimedia](https://wordpress.org/support/users/quemultimedia/)
 * (@quemultimedia)
 * [15 years, 11 months ago](https://wordpress.org/support/topic/posts-in-three-columns/#post-1365005)
 * Greetings Guys, [@kz](https://wordpress.org/support/users/kz/), [@alchymyth](https://wordpress.org/support/users/alchymyth/)
 * [Have been going round in circles](http://wordpress.org/support/topic/407546),
   before searching and coming across this post, really happy to find this post.
 * I’m looking at something similar [ Posts in Multiple Columns ], however, I just
   want to display three posts from one category, under a slideshow, as thus:
 * | SlideShow Here |
    [4 Posts from same category, e.g. Featured]
 * |Post 1 || Post 2 || Post 3 |
    [3 Posts Randomized from another category, e.g.
   Our Articles]
 * Looking forward to some positive learning tips.
 * Rgds
    Q

Viewing 15 replies - 1 through 15 (of 18 total)

1 [2](https://wordpress.org/support/topic/posts-in-three-columns/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/posts-in-three-columns/page/2/?output_format=md)

The topic ‘Posts in three columns’ is closed to new replies.

## Tags

 * [columns](https://wordpress.org/support/topic-tag/columns/)
 * [css](https://wordpress.org/support/topic-tag/css/)
 * [html](https://wordpress.org/support/topic-tag/html/)
 * [php](https://wordpress.org/support/topic-tag/php/)
 * [post](https://wordpress.org/support/topic-tag/post/)

 * 18 replies
 * 9 participants
 * Last reply from: [hampusjageland](https://wordpress.org/support/users/hampusjageland/)
 * Last activity: [15 years, 8 months ago](https://wordpress.org/support/topic/posts-in-three-columns/page/2/#post-1365017)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics