how can i do box like facebook timeline - css

Question

I'm trying to create a timeline similar to Facebook's timeline, i.e. I want a timeline with two columns where I can place elements on the left and on the right.
In order to do so, I started with the following code but it does not work as expected:
<ol class="timeline2 clear">
<li class="spine">
</li>
<?php
$counter=0;
foreach ($response as $row) {
if($counter % 2 == 0){$class= "right";} else $class="left";
?>
<li class="<?=$class ?>">
<i class="pointer"></i>
<div class="unit">
<!-- Story -->
<div class="storyUnit">
<div class="imageUnit">
<? if (empty($row->pic)) { ?>
<img width="32" height="32" alt="" src="images/nopic.png">
<? } else { ?>
<img width="32" height="32" alt="" src="uploads/<?php echo $row->pic; ?>">
<? } ?>
<div class="imageUnit-content">
<h4><?php echo $row->fullname; ?></h4>
<p><?php echo $row->ev_date ?></p>
</div>
</div>
<p><?php echo $row->ev_text; ?></p>
<? if (!empty($row->ev_pic)) { ?>
<p><img src="uploads/<?php echo $row->ev_pic ?>" width="250" height="250"</p>
<? } ?>
</div>
<!-- / Story -->
<!-- Units -->
<ol class="storyActions">
<!-- / Comment -->
</ol>
<!-- / Units -->
</div>
</li>
<?php $counter++; } ?>
<div class="clear"></div>
</ol>
<? } ?>
the css of this box like :-
.timeline2 {
background: url("../images/line.png") repeat-y scroll center top transparent;
list-style: none outside none;
margin: 0;
padding: 6px;
position: relative;
height:auto;
}
.timeline2 > li {
clear: left;
float: left;
margin-bottom: 15px;
position: relative;
width: 326px;
z-index: 2;
}
.timeline2 > .right {
clear: right;
float: right;
}
.timeline2 .pointer {
background: url("../images/icons-4.png") no-repeat scroll -41px -28px transparent;
height: 15px;
position: absolute;
right: -18px;
top: 20px;
width: 19px;
}
.timeline2 .right > .pointer {
background-position: -61px -28px;
left: -18px;
right: auto;
}
.timeline2 > .left + .right > .pointer {
top: 40px;
}
.timeline2 > .right + li > .pointer {
top: 40px;
}
.timeline2 .highlight {
clear: both;
float: none;
width: auto;
}
.timeline2 .spine {
height: 100%;
left: 436px;
position: absolute;
width: 29px;
z-index: 1;
}
.timeline2 .spine > a, .timeline2 .spine a:visited {
display: block;
height: 100%;
}
.unit {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #C4CDE0;
border-radius: 3px 3px 3px 3px;
padding: 5px;
}
.storyUnit {
padding: 10px;
}
.imageUnit {
border-bottom: 1px solid #CCCCCC;
font-size: 11px;
margin-bottom: 15px;
padding-bottom: 5px;
}
.imageUnit .imageUnit-content {
display: inline-block;
padding-left: 5px;
vertical-align: top;
}
.imageUnit .imageUnit-content > p {
margin: 0;
}
.imageUnit .imageUnit-content a{
display: inline-block;
padding-left: 5px;
vertical-align: top;
color: #3589CF;
}
.photoUnit {
margin: 0 -10px -5px;
}
.controls {
background: none repeat scroll 0 0 #F2F2F2;
border-top: 1px solid #E6E6E6;
list-style: none outside none;
margin: 5px -5px -5px;
padding: 4px;
}
.controls > li {
display: inline-block;
}
.controls .post {
float: right;
}
.actions {
font-size: 11px;
font-weight: bold;
list-style: none outside none;
margin: 0;
overflow: hidden;
padding: 0;
}
.actions > li {
border-left: 1px solid #E5E5E5;
display: inline;
float: left;
}
.actions > li:first-child {
border-left: medium none;
}
.actions > li > a {
display: inline-block;
margin: 0 3px;
padding: 5px;
}
.actions > li > a:hover {
background: none repeat scroll 0 0 #EBEEF4;
text-decoration: none;
}
.actions .active > a {
color: #000000;
}
.storyActions {
background: none repeat scroll 0 0 #EDEFF4;
font-size: 11px;
list-style: none outside none;
margin: 0;
padding: 5px 10px;
}
.storyActions > li {
display: inline;
}
.storyActions > li:before {
content: " · ";
}
.storyActions > li:first-child:before {
content: "";
}
#Spinner {
padding: 10px 0;
text-align: center;
}
when the left box is big than right, and there are another left box, the right box not show behind left box, there are below left box.
how can i show it behind left box
see :- http://jsfiddle.net/RuVqu/

Answer 1

You need to use a dynamic grid layout. It works by placing elements in optimal position based on available vertical space.