Как сделать блоки в две колонки.

[kranopodem]

Здравствуйте, добрые люди) Помогите пожалуйста мне вот с чем.

Я хочу сделать вывод статей в две колонки. Сначала вроде всё получилось, но потом я заметил, что если блок из первой колонки немного увеличивается в размерах(точнее, в высоте), то нижний блок сразу падает вниз и отображается как будто он находится под блоком, который справа него.

Если вы ничего не поняли =) То на картинке всё отчетливо видно. Мне нужно, чтобы этот блок так не падал. Что посоветуете сделать?

<div class="content">

<div class="post-main">
   <div class="zagolovok"><h1><a href="#">Прикольное видео Мега супер прям я круто супер </a></h1>
   </div>
<img  class="miniimg" src="images/chuck-norris.jpg" alt="" />
   <div class="excerpt">
<p>Это видео очень интересное
и познавательное, я понял 
смысл жизни просмотрев 
это видео.dsadasdasdasdadasdssadasdasdadadsdadsadasdasdasdadasddasdasdasdasdasdsadasdsddddddddddddddddddddddddddddddddddddddddd
</p>
<a href="#">Читать полностью...</a>
   </div>

		<div class="dop">
		   <div class="left">Рубрика : <a href="#">Ололоева, Квашнева, Алдексеевна, Алешкина</a><br/></div>
		   <div class="center">Дата: <a href="#">03/02/2012</a><br/></div>
		   <div class="right">Комментариев: <a href="#">666</a></div>
		</div>
</div>



<div class="post-main">
     <div class="zagolovok"><h1><a href="#">Прикольное видео Мега супер прям я круто супер </a></h1>
     </div>
<img  class="miniimg" src="images/social/image1.jpg" alt="" />
    <div class="excerpt">
<p>Это видео очень интересное
и познавательное, я понял 
смысл жизни просмотрев 
это видео.dsadasdasdasdadasdsadadsdasddddddddddddddddddddddddddddddddddddddddd</p>
<a href="#">Читать полностью...</a>
    </div>

		<div class="dop">
		   <div class="left">Рубрика : <a href="#">Ололоева, Квашнева, Алдексеевна, Алешкина</a><br/></div>
		   <div class="center">Дата: <a href="#">03/02/2012</a><br/></div>
		   <div class="right">Комментариев: <a href="#">666</a></div>
		</div>
</div>

<div class="post-main">
    <div class="zagolovok"><h1><a href="#">Прикольное видео Мега супер прям я круто супер </a></h1>
    </div>
<img  class="miniimg" src="images/chuck-norris.jpg" alt="" />
   <div class="excerpt">
<p>Это видео очень интересное
и познавательное, я понял 
смысл жизни просмотрев 
это видео.dsadasdasdasdadasdsadadsdasddddddddddddddddddddddddddddddddddddddddd</p>
<a href="#">Читать полностью...</a>
   </div>

		<div class="dop">
		    <div class="left">Рубрика : <a href="#">Ололоева, Квашнева, Алдексеевна, Алешкина</a><br/></div>
		    <div class="center">Дата: <a href="#">03/02/2012</a><br/></div>
		    <div class="right">Комментариев: <a href="#">666</a></div>
		</div>
</div>


<div class="post-main">
     <div class="zagolovok"><h1><a href="#">Прикольное видео Мега супер прям я круто супер </a></h1>
     </div>
<img  class="miniimg" src="images/chuck-norris.jpg" alt="" />
   <div class="excerpt">
<p>Это видео очень интересное
и познавательное, я понял 
смысл жизни просмотрев 
это видео.dsadasdasdasdadasdsadadsdasddddddddddddddddddddddddddddddddddddddddd</p>
<a href="#">Читать полностью...</a>
   </div>

		<div class="dop">
		    <div class="left">Рубрика : <a href="#">Ололоева, Квашнева, Алдексеевна, Алешкина</a><br/></div>
		    <div class="center">Дата: <a href="#">03/02/2012</a><br/></div>
		    <div class="right">Комментариев: <a href="#">666</a></div>
		</div>
</div>

</div>

Вот CSS код:

.content {
width:670px;
margin-top:10px;
word-wrap:break-word;
border:1px solid #c5c5c5;
float:right;
margin-right:5px;
background:#e7f3fb;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}

.post-main { background:#ffffdb; width:303px; border:1px solid; margin: 15px; float:left; }
.post-main a{color:#0096ff; font-weight:600;}
.post-main a:hover{ text-decoration:none; }
.post-main h1 a{ color:#0096ff; font-family:Ubuntu; font-weight:600; font-size:20px;}
.post-main h1 a:hover{ text-decoration:none;}
.miniimg {margin-left:15px; margin-top:10px; border:1px solid #c2c2c2; width:264px; height:200px;}
.titcon { font-family:Ubuntu; float:left; font-size:24px; padding-top:20px; font-weight:600;}

.excerpt { padding:10px 10px 20px 10px; }
.excerpt p{ margin-bottom:15px;  }
.dop { border:1px solid #c2c2c2; background:#d0edaa; padding:10px; }
.dop a { color:#F7941d; font-weight:600; font-family:Ubuntu; text-decoration:none; font-size:14px;}
.dop a:hover {text-decoration:underline;}
.dop .left {text-align:left; padding-bottom:5px;}
.dop .left a{ font-weight:normal; color:#0096ff; }
.dop .center { text-align:left; padding-bottom:5px;}
.dop .right { text-align:right; margin-top:-20px;}
.dop .center a{color: #3333FF; }
.dop .right a{color: #3333FF; }

.zagolovok {padding:10px;}

Прошу помочь =) Заранее спасибо...

[Switch74]

разделяй построчно блоки чем-нибудь вроде

<div style="clear:both;"></div>

или объединяй по два блока, находящиеся в одной строке, в div

<div style="overflow:hidden;">
....
</div>

[kranopodem]

разделяй построчно блоки чем-нибудь вроде

<div style="clear:both;"></div>

или объединяй по два блока, находящиеся в одной строке, в div

<div style="overflow:hidden;">
....
</div>

Огромное спасибо, всё получилось=)