Time line trouble - php

Question

I need to do time-line as time-line on facebook, each div under another div.
For blocks I have : -float: left, display: inline-block; but can't remove free space.
<div class="wrap">
<input type="hidden" id="tp" value="<?php echo $tp; ?>" />
<?php
$i=0;
foreach($memes as $key=>$val){
$i++;
if($i!=1){
echo "<br clear='all' />";
echo "<br clear='all' />";
}else{
echo "<br clear='all' />";
}
echo "<h1 class='fd_date' alt='".$key."'>".(($res = dt_diff($key)) ? $res : (($dt = explode("-", $key)) ? $res : ""))." ".getDay($key)."</h1>";
echo "<br clear='all' />";
echo "<div class='memescont'>";
for($cnt=0;$cnt<count($val);$cnt++){
if($cnt%2==0){
echo"
<div class='fd_meme' rel='".$val[$cnt]['id']."' >
<h1 class='title'>".$val[$cnt]['tit']."</h1>
<img width='465px' alt='".trim("Комиксы, мемы - ").$val[$cnt]['tit']."' src='".base_url()."upload/".$val[$cnt]['src']."' />
<div class='social'>
<div class='likes'>Понравилось:</div>
<div class='shared'>Поделиться:</div>
</div>
</div>
";
}else{
echo"
<div class='fd_meme' rel='".$val[$cnt]['id']."' >
<h1 class='title'>".$val[$cnt]['tit']."</h1>
<img width='465px' alt='".trim("Комиксы, мемы -").$val[$cnt]['tit']."' src='".base_url()."upload/".$val[$cnt]['src']."' />
<div class='social'>
<div class='likes'>Понравилось:</div>
<div class='shared'>Поделиться:</div>
</div>
</div>
";
}
}
echo "</div>";
}
?>
<br clear="all" />
</div>
css :
.content {
height: 100%;
overflow: auto;
position: absolute;
width: 100%;
z-index: 3;
}
.head {
display: inline-block;
width: 100%;
z-index: 2;
}
.wraphead {
margin: 5% auto;
left: 0;
right: 0;
clear: both;
display: block;
margin: 0 auto;
width: 1280px;
height: 64px;
background: url(../i/header.png) 0 0 no-repeat;); position: fixed; top: 0; z-index: 2;
}
#logo { width: 145px; height: 38px; background: url(../i/logo.png) 0 0 no-repeat; float:left; margin: 11px 0;}
.links { height: 60px; float: left; margin-left: 115px;}
.links a { float: left; color: #fff; font-size: 14px; font-family: Verdana, Geneva, sans-serif; margin: 17px 90px 23px 0; }
.links a:hover {cursor: pointer;}
.langs {float: left; width: 62px; height: 20px; border: 1px solid #dedede; border-radius: 1px; margin: 17px 0 23px; }
.langs .lang { margin-left: 8px; width: 10px; height: 8px; margin-top: 6px; margin-bottom: 6px; display: inline-block;}
.lang.ru {background: url(../i/ru.png) 0 0 no-repeat;}
.langs span { font-size: 10px; font-family: Verdana, Geneva, sans-serif; font-style: normal; color: #ffffff; float: right; display: inline-block; margin-top: -18px; margin-right: 22px;}
em.lang_select{ width: 5px; height: 3px; background: url(../i/lang_select.png) 0 0 no-repeat; display: inline-block; float: right; margin-top: -11px; margin-right: 10px}
em.lang_select:hover {cursor: pointer; }
.wrap {width: 980px; display: block; margin: 0 auto;}
.memes {width: 100%; display: inline-block;}
.memes .wrap { background: #fff; z-index: -1; -moz-box-shadow: 0 0 3px rgba(0,0,0,0.5); /* Для Firefox */
-webkit-box-shadow: 0 0 3px rgba(0,0,0,0.5); /*Для Safari и Chrome */
box-shadow: 0 0 3px rgba(0,0,0,0.5); /* Параметры тени */ }
.lft { width: 465px; display: inline-block; padding: 10px 0; }
h1.title{ font-size: 20px; color: #000; font-family: Arial, Helvetica, sans-serif; max-width: 460px; display: inline-block; float: left; font-weight: lighter; text-align: left; margin: 4px 0;}
.martop40 { margin-top: 30px; }
.rgt { width: 465px; float:left; display: inline-block; margin: 0 11px; padding-right: 13px; border-right: 2px solid #999999; }
h1.fd_date{ color: #626262; font-size: 16px; font-family: Verdana, Geneva, sans-serif; text-align: center; font-weight: lighter; bottom: 0;}
.line {width: 2px; display: inline-block; position: absolute; margin-left: 2px; background: url(../i/line.png) 0 0 repeat-y; z-index: 0; min-height: 100%; height: auto;}
.memescont {margin: -10px 0;}
.social { height: 80px; width: 469px; background: url(../i/social_bg.png) 0 0 no-repeat; }
.rgt img, .lft img {border: 1px solid #999;}
.fd_meme { width: 465px; float: left; margin: 0 12px; display: inline-block;}
.right { width: 490px; float: left; }
.left { width: 490px; float: right; }
.likes, .shared {font-family: Verdana, Geneva, sans-serif; font-size: 14px; color: #272727; padding-top: 12px; padding-left: 10px; display: inline-block; width: 202px; height:60px;}
pic: http://picshare.ru/view/97355/rand.png.html
ps. Sorry for my bad english.

Answer 1

It sounds like you are looking for the jQuery masonry plugin. See here
This is what it will look like