CSS lijst opmaken in column.

Hallo,

Ik heb de volgende situatie, op deze pagina: http://santacatarinabrasil.com/ staat rechts een lijst met ‘listings’. Dit is een kolomn die automatisch twee rijen wordt. Nu werkt dat opzich goed, maar niet 100%, soms komen ze niet goed naast elkaar te staan omdat de post dan te breed is.

Dit is de CSS

#latestlistings {
	width: 480px;
	float: left;
	/*overflow: hidden;*/
}

	#latestlistings .inner {
		padding: 27px 20px 20px 20px;
		overflow: hidden;
	}

	.latestlisting {
		margin-bottom: 20px;
		margin-right: 10px;
		float: left;
		position: relative;
}

.latestlisting li {
	line-height: 1.5em;
	font-size: 1.1em;
}

	.latestlisting ul {
		margin-top: 5px;
	}

	.latestlisting li.citystatezip {
		font-size: 1.4em;
		margin-bottom: 5px;
		font-weight: bold;
	}

	.latestlisting li.price {
		font-size: 1.4em;
	}

	.latestlisting li.bedsbaths {
		/* margin-top: 5px; */
	}

En dit is de HTML:

<div id="latestlistings">
		<div class="inner">

			<?php $recent = new WP_Query('post_type=listing&post_status=publish&posts_per_page='.get_option('wp_recentlistingsnumber_home')); ?>

			<div style="padding-top: 4px; padding-bottom:15px"><h2><?php echo get_option('wp_heading_recentlistings') ?></h2></div>

			<?php if ($recent->have_posts()) : while ($recent->have_posts()) : $recent->the_post(); ?>
			<?php include 'includes/variables.php' ?>
			<div class="latestlisting">
			<?php $sliderimages = get_post_meta($post->ID, 'images_value', true);
			if ($sliderimages) {
				$arr_sliderimages = explode("\n", $sliderimages);
				} else {
				$arr_sliderimages = get_gallery_images();
				}

				$firstimage = $arr_sliderimages[0];
				$arr_sliderimages = parse_url($firstimage);

				//echo $arr_sliderimages[path];

				$resized = timthumb(100, 200, $arr_sliderimages[path], 1);
			?>	

			<a href="<?php the_permalink(); ?>"><img width="200" height="100" alt="Image for <?php echo $address; ?>" src="<?php echo $resized ?>" /></a>
			<div class="shadow-small"></div>

			<?php include 'includes/bannerssmall.php'; ?>

			<ul>
			<li class="citystatezip"><a href="<?php the_permalink(); ?>"><?php echo $citystatezip ?></a></li>
			<li class="address"><?php echo $address; ?></li>

			<?php if ($cr == "Residential") { ?>
				<li class="bedsbaths"><?php echo get_option('wp_bedrooms_text'); ?>: <?php echo $beds ?> &bull; <?php echo get_option('wp_bathrooms_text'); ?>: <?php echo $baths ?></li>
			<?php } ?>
			<br />
			<li class="price"><?php include 'includes/price.php'; ?></li>
                        <br />
			</ul>
			&nbsp;
			</div><!-- end latestlisting -->

Hoe zou ik dit kunnen opmaken dat het los in twee kolommen komt te staan (zoals het hoort)en niet zoals nu in één kolom en twee rijtjes naast elkaar?

Alvast super veel dank!