Floating divs top to bottom - html

Question

I'm making a productscreen, I've made a Paint example what i've in mind.
The big black block is the productView with an sliding container in the back. I want to alphabetically order those products (All these little roundend blocks are products in a divs). But this order is "A" from beginning and 'Z' to end of slindingcontainer.
I want to order the products like the red line. I now have a second container with an modules, only this breaks my code.
Is there an other way to order the products like my example drawing?
Update - My code now:
<?php
if(!empty($productByType)){
for($i=0;$i < count($productByType); $i++){
$id = $productByType[$i]['id'];
$title = $productByType[$i]['title'];
$img = base_url('/img/producten/'.$productByType[$i]["img"]);
if($i % 2 == 0){
echo '<div class="seperatorforproduct">';
//0,2,4,6,8
}
============
Content divs
**Example of one product:** (Using modal from bootstrap)
echo '<div class="button btnstyle">';
echo '<div class="imgbtn">';
// <!-- Picture-->
echo '<img src="'.$img.'" title="'.$title.'" alt="'.$title.'" data-toggle="modal" href="#modal'.$id.'" />';
echo '</div>';
echo '<div class="txtbtn txtstyle">';
echo '<a class="btn" data-toggle="modal" href="#modal'.$id.'" >'.$title.'</a>';
echo '</div>';
echo '</div>';
?>
<div class="modal" style="display:none;" id="modal<?=$id?>">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h2><?=$title?></h2>
</div>
<div class="modal-body">
<div class="modal-left">
<img src="<?=$img?>" title="<?=$title?>" alt="<?=$title?>" />
</div>
<div class="modal-right">
<p><?=$productByType[$i]['info']?></p>
</div>
</div>
<div class="modal-footer">
Telephone number etc.
</div>
</div>
============
<?php
if($i % 2 == 1 || $i == count($productByType)){
// 0,3,6,9,12
echo '</div>';
}
}
}?>

Answer 1

Check this http://jsfiddle.net/Mzmay/18/
Using PHP you generate the markup like that in fiddle & later you can use the jQuery to do that. I am not sure how to do the same by just using Php.