How to create three columns from selected posts

Question

I would like to create a three columns with 3 selected posts. They must include image and title. Like this http://i.imgur.com/tXg0bv3.png How to create it in CSS and HTML? This is very important for me, I can't find something like that. Thanks.

I'm sorry, I did not mention. This columns must be outside the loop. This is a code for post outside the loop:

<?php
$recent = new WP_Query();
$recent->query('showposts=1');
if($recent->have_posts()) : while($recent->have_posts()): $recent->the_post();
?>
<div class="post_image_th">
<?php the_post_thumbnail('mainImageCropped'); ?>
</div>
<div class="post_content_spot">
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<?php the_excerpt(); ?>
<ul>
<li class="user"><?php echo get_avatar( get_the_author_meta( 'ID' ), 32 ); ?><?php the_author_posts_link(); ?></li>
<li class="comments"><?php comments_popup_link('0 comments &#187;', '1 comment &#187;', '% comments &#187;'); ?></li>
</ul>
<?php endwhile ?>
<?php else : ?>
<p> Nothing find </p>
<?php endif ?>

Answer 1

You might not have expected this kind of solution but it is worth knowing that there is also a front end solution for this kind of problem.

The css3 spec have a new feature called column-count, which will automatically render your text in multiple columns

Here is a simple example from w3schools

div
{
column-count:3;
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
}

Here is another

I know this only works in modern browsers, but people have started using it already!

And good news there already a fallback jquery plugin for this called Columnizer

Answer 2

You could do something like that :

<?php
$i = 0;
$args   = array('posts_per_page' => 3);
$recent = new WP_Query($args);
if($recent->have_posts()) : while($recent->have_posts()): $recent->the_post();
$i++;
?>

<div class="post-in-column">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
<?php the_excerpt(); ?>
</div>

<?php echo ($i % 3 == 0) ? '<div class="clear"></div>' : ''; ?>

No news.

Then a little bit of CSS :

.clear {clear:both;}
.post-in-column {float:left; width: 33%/* maybe you'll need to set fixed width */; }

I haven't tested it but it should work.