Вывод последних новостей в три колонки на главною

В home.php и некоторую часть в index.php, встаывила такой код:

<ul>
<li>
<?php $WP_Query = new WP_Query('cat=1&posts_per_page=3');
if ($WP_Query->have_posts()) : while ($WP_Query->have_posts()) : $WP_Query->the_post();?>
<div><?php the_title('');?> </div>
<?php endwhile; endif; ?>
</li>
<li>
<?php $WP_Query = new WP_Query('cat=2&posts_per_page=3');
if ($WP_Query->have_posts()) : while ($WP_Query->have_posts()) : $WP_Query->the_post();?>
<div><?php the_title('');?> </div>
<?php endwhile; endif; ?>
</li>
<li>
<?php $WP_Query = new WP_Query('cat=3&posts_per_page=3');
if ($WP_Query->have_posts()) : while ($WP_Query->have_posts()) : $WP_Query->the_post();?>
<div><?php the_title('');?> </div>
<?php endwhile; endif; ?>
</li>
</ul>

наконец-то работает, вышли новости на главную, но не в одну линию, а одна под другой…Подскажите пожалуйста как мне правильно сверстать и где моя ошибка в CSS ?

#news li {
    -display: -moz-inline-box;
    -display:inline-block;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-top:1px solid #ddd;
    border-left:1px solid #ddd;
    border-bottom:1px solid #fefefe;
    border-right:1px solid #fefefe;
    padding:6px 12px;
    text-shadow:1px 1px #fff;
    background:url(images/bk_blurb.jpg) 0 100% repeat-x;
    font-weight:bold;
    float:left;
    width:300px;
    height:380px;
    margin-right:25px;
    overflow:hidden;
    margin-bottom:10px;
}

Код в home.php :

<!-- begin news -->

<ul>
<li>
<div id="news">
<div align="justify">
<?php $WP_Query = new WP_Query('cat=106&posts_per_page=1');
if ($WP_Query->have_posts()) : while ($WP_Query->have_posts()) : $WP_Query->the_post();?>
<div><h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<a href="<?php the_permalink(); ?>" rel="prettyPhoto" title="<?php the_title();?>"><?php the_post_thumbnail(); ?></a><?php the_excerpt() ?></div>
<?php endwhile; endif; ?>
</div>
</div>
</li>
<li>
<div id="newsy">
<div align="justify">
<?php $WP_Query = new WP_Query('cat=312&posts_per_page=1');
if ($WP_Query->have_posts()) : while ($WP_Query->have_posts()) : $WP_Query->the_post();?>
<div><h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<a href="<?php the_permalink(); ?>" rel="prettyPhoto" title="<?php the_title();?>"><?php the_post_thumbnail(); ?></a><?php the_excerpt() ?></div>
<?php endwhile; endif; ?>
</div>
</div>
</li>
<li>
<div id="news">
<div align="justify">
<?php $WP_Query = new WP_Query('cat=275&posts_per_page=1');
if ($WP_Query->have_posts()) : while ($WP_Query->have_posts()) : $WP_Query->the_post();?>
<div><h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<a href="<?php the_permalink(); ?>" rel="prettyPhoto" title="<?php the_title();?>"><?php the_post_thumbnail(); ?></a><?php the_excerpt() ?></div>
<?php endwhile; endif; ?>
</div>
</div>
</li>
</ul>
<!-- end news -->

Код в CSS :

#news li {
    -display: -moz-inline-box;
    -display:inline-block;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-top:1px solid #ddd;
    border-left:1px solid #ddd;
    border-bottom:1px solid #fefefe;
    border-right:1px solid #fefefe;
    padding:6px 12px;
    text-shadow:1px 1px #fff;
    background:url(images/bk_blurb.jpg) 0 100% repeat-x;
    font-weight:bold;
    float:left;
    width:33%;
    height:380px;
    margin-right:25px;
    overflow:hidden;
    margin-bottom:10px;
}

И после всего этого, всего лишь вот что выходит

а мне нужно чтоб получилось вот так

Не понимаю что я делаю не так?

Спасибо, все зделала как вы сказали, ….но почему-то все выглядит по прежнему 🙁