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 but with three columns in above code, please help me