Title: need three columns
Last modified: August 19, 2016

---

# need three columns

 *  Resolved [DivMaster](https://wordpress.org/support/users/divmaster/)
 * (@divmaster)
 * [16 years, 5 months ago](https://wordpress.org/support/topic/need-three-columns/)
 * hi ! I was asking in plugins but no plugin is available for this what i am looking
   for, i need to display three columns on the homepage, currently i was able to
   do this by this code :
 *     ```
       <!-- first column -->
       																												<?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) !== 0) : $wp_query->next_post(); else : the_post(); ?>
   
       	    																									<!-- Begin Blog Post -->
       	    																									<div id="left-column">
       																											<div <?php post_class('mc-wrapper'); ?> id="post-<?php the_ID(); ?>">
       																												<div class="mc">
       																													<?php $thumb = get_post_meta($post->ID, 'thumb', TRUE); ?>
       																													<?php if($thumb == '' && $option['catch_first_image'] == 'true') {
       																													$thumb = catch_that_image();
       																														if ($thumb != '') { ?>
       																														<div class="mc-img">
       																															<img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php echo $thumb ?>&w=<?php echo $option['thumb_w']; ?>&h=<?php echo $option['thumb_h']; ?>&zc=1&q=<?php echo $option['timthumb_quality']; ?>" alt="<?php the_title(); ?>" />
       																														</div>
       																														<?php } ?>
       																													<?php } elseif ($thumb != '') { ?>
       																													<div class="mc-img">
       																														<img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php echo $thumb ?>&w=<?php echo $option['thumb_w']; ?>&h=<?php echo $option['thumb_h']; ?>&zc=1&q=<?php echo $option['timthumb_quality']; ?>" alt="<?php the_title(); ?>" />
       																													</div>
       																													<?php } ?>
       																													<div class="mc-text">
       																														<div class="mc-subheader">
       																															<div class="componentheading">
       																																<span><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></span>
       																															</div>
       																														</div>
       																														<div class="mc-content">
       																															<?php the_content(false); ?>
       																														</div>
       																														<?php if($option['blog_post_meta'] == 'true') { ?>
       																														<div class="mc-header">
       																															<div class="componentheading">
       																																<div class="blog-post-info">
       																																	 <?php _re('Category:'); ?> <?php the_category(', ') ?>
       																																</div>
       																																<div class="views">
       																																<?php if(function_exists('the_views')) { the_views(); } ?>
       																																</div>
       																																<div class="ratingbox">
       																																<div style="clear: both;"></div>
       																																<?php if(function_exists('the_ratings')) { the_ratings(); } ?>
       																																</div>
       																															</div>
       																														</div>
       																														<?php } ?>
       																														<div class="clr"></div>
       																													</div>
       																												</div>
       																												<div class="roknewspager-div">&nbsp;</div>
       																											</div>
       																											<!-- End Blog Post -->
       																											</div>
       																											<?php endif; endwhile; else: ?>
   
       																												<?php endif; ?>
       																												<!-- End of first column -- >
       																												<?php $i = 1; rewind_posts(); ?>
       																											<!-- Start of Second Column -->
       																											<?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) == 0) : $wp_query->next_post(); else : the_post(); ?>
   
       	    																									<!-- Begin Blog Post -->
       	    																									<div id="right-column">
       																											<div <?php post_class('mc-wrapper'); ?> id="post-<?php the_ID(); ?>">
       																												<div class="mc">
       																													<?php $thumb = get_post_meta($post->ID, 'thumb', TRUE); ?>
       																													<?php if($thumb == '' && $option['catch_first_image'] == 'true') {
       																													$thumb = catch_that_image();
       																														if ($thumb != '') { ?>
       																														<div class="mc-img">
       																															<img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php echo $thumb ?>&w=<?php echo $option['thumb_w']; ?>&h=<?php echo $option['thumb_h']; ?>&zc=1&q=<?php echo $option['timthumb_quality']; ?>" alt="<?php the_title(); ?>" />
       																														</div>
       																														<?php } ?>
       																													<?php } elseif ($thumb != '') { ?>
       																													<div class="mc-img">
       																														<img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php echo $thumb ?>&w=<?php echo $option['thumb_w']; ?>&h=<?php echo $option['thumb_h']; ?>&zc=1&q=<?php echo $option['timthumb_quality']; ?>" alt="<?php the_title(); ?>" />
       																													</div>
       																													<?php } ?>
       																													<div class="mc-text">
       																														<div class="mc-subheader">
       																															<div class="componentheading">
       																																<span><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></span>
       																															</div>
       																														</div>
       																														<div class="mc-content">
       																															<?php the_content(false); ?>
       																														</div>
       																														<?php if($option['blog_post_meta'] == 'true') { ?>
       																														<div class="mc-header">
       																															<div class="componentheading">
       																																<div class="blog-post-info">
       																																	 <?php _re('Category:'); ?> <?php the_category(', ') ?>
       																																</div>
       																																<div class="views">
       																																<?php if(function_exists('the_views')) { the_views(); } ?>
       																																</div>
       																																<div class="ratingbox">
       																																<div style="clear: both;"></div>
       																																<?php if(function_exists('the_ratings')) { the_ratings(); } ?>
       																																</div>
       																															</div>
       																														</div>
       																														<?php } ?>
       																														<div class="clr"></div>
       																													</div>
       																												</div>
       																												<div class="roknewspager-div">&nbsp;</div>
       																											</div>
       																											<!-- End Blog Post -->
       																											</div>
       																											<?php endif; endwhile; else: ?>
   
       																												<?php endif; ?>
   
       																												<!-- end of second column -->
       ```
   
 * and in css :
 *     ```
       div#left-column {
       	width: 333px;
       	float: left;
       	clear: none;
       	}
       div#right-column {
       	width: 333px;
       	float: right;
       	clear: none;
       	}
       ```
   
 * now the problem is it is showing two columns but they are not in one line, means
   one row is on top and when finish the second is at bottom, i wants something 
   like this [http://perishablepress.com/press/wp-content/images/2008/horiz-order/horizontal-order_css.gif](http://perishablepress.com/press/wp-content/images/2008/horiz-order/horizontal-order_css.gif)
   but with three columns in above code, please help me

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

 * 0 replies
 * 1 participant
 * Last reply from: [DivMaster](https://wordpress.org/support/users/divmaster/)
 * Last activity: [16 years, 5 months ago](https://wordpress.org/support/topic/need-three-columns/)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics