How to push <DIVS> together, vertically? - html

Question

I've been looking for a solution for this, for a long time now.
How can I vertically push divs together (see attached image).
It's been suggested to use specific CSS coding, but that is no good in this case as the div height is not set - it changes depending on the content being loaded.
------------------Added information ------------------
As requested, this is the code the populates the divs using content from a database. The divs simply need to be pushed up as shown in the attached image.
<?php
require_once('../scripts/include.php');
$who = 65; //temp value to be deleted
$result = mysql_query(
"SELECT
tbl_status.id as statID,
tbl_status.from_user as statFROM,
tbl_status.status as statSTATUS,
tbl_status.deleted as statDEL,
tbl_status.date as statDATE,
tbl_users.id as usrID,
tbl_users.name as usrNAME,
tbl_users.location as usrLOCATION,
tbl_photos.profile as photosPROFILE,
tbl_photos.photo_link as photoLINK,
tbl_photos.default_photo as photoDEFAULT
FROM tbl_status
LEFT JOIN tbl_users ON tbl_status.from_user = tbl_users.id
LEFT JOIN tbl_photos ON tbl_photos.profile = tbl_users.id
WHERE tbl_status.deleted = '0' AND tbl_photos.default_photo IS NULL OR tbl_photos.default_photo = '1'
ORDER BY tbl_status.date desc
LIMIT 24
");
while($row = mysql_fetch_array($result))
{
$sampleText = $row['statSTATUS'];
$pattern = '/#[a-zA-Z0-9]*/';
$replacement = '$0';
$updatedText = preg_replace($pattern, $replacement ,$sampleText);
echo'
<div class="statusCont" style="width:150px;">
<div class="statusUsr">' . $row['usrLOCATION'] . '</div>
<div class="statusTxt"><p>' . $updatedText . '</p></div>
<div class="statBackground" style="background-image:url(../assets/uploads/resized_' . $row['photoLINK'] .');
background-repeat:no-repeat; background-size:100%;width:150px; height:50px; opacity:1;"></div>
</div><!-- ends .statusCont -->
';}
?>

Answer 1

I have an idea which I think you can implement in your site with the 3-column idea.
How about using the MOD % of the total posts displayed on your page.
Since you have 3 columns, the first post will be in the first column. If a second post post out, the first one will display on the second column, and etc.
Let the total number of post displayed on the page be $total.
And let the current number be $current.
$total; // the total divs will be displaying in the page
for ($current = 1; $currrent < $total+1; $current++)
{
if($current % 3 == 1)
{
//the code php or javascript to display <div> in column 1
}
else if($current % 3 == 2)
{
//the code php or javascript to display <div> in column 2
}
else if($current % 3 == 0)
{
//the code php or javascript to display <div> in column 3
}
}
Please forgive me if I made mistakes in the code but you get the idea.

Answer 2

Do 3 columns :
Codepen
HTML
<div id="col1" class="col">
<div id="rand1"></div>
<div id="rand2"></div>
</div>
<div id="col2" class="col">
<div id="rand3"></div>
<div id="rand4"></div>
</div>
<div id="col3" class="col">
<div id="rand5"></div>
<div id="rand6"></div>
</div>
CSS
.col {
width:100px;
float:left;
margin-left:10px
}
#rand1
{
height:90px;
background: pink;
}
#rand2
{
height:100px;
background: green;
}
#rand3
{
height:200px;
background: grey;
}
#rand4
{
height:200px;
background: red;
}
#rand5
{
height:300px;
background: green;
}
#rand6
{
height:150px;
background: red;
}
PHP
<?php
$i=1;
$sampleText = array();
$pattern = array();
$replacement = array();
$updatedText = array();
while($row = mysql_fetch_array($result))
{
$sampleText[$i] = $row['statSTATUS'];
$pattern[$i] = '/#[a-zA-Z0-9]*/';
$replacement[$i] = '$0';
$updatedText[$i] = preg_replace($pattern, $replacement ,$sampleText[$i]);
$Myvar[$i] ='<div class="statusCont" style="width:150px;">
<div class="statusUsr">' . $row['usrLOCATION'] . '</div>
<div class="statusTxt"><p>' . $updatedText[$i] . '</p></div>
<div class="statBackground" style="background-image:url(../assets/uploads/resized_' . $row['photoLINK'] .');
background-repeat:no-repeat; background-size:100%;width:150px; height:50px; opacity:1;"></div>
</div>';
$i++;
}
$col1=1;
$col2=2;
$col3=3;
$i=$i-1;
//column2
echo '<div class="col">';
while($col1<=$i) {
echo $Myvar[$col1] ;
$col1=$col1+3;
}
echo '</div>';
//column2
echo '<div class="col">';
while($col2<=$i) {
echo $Myvar[$col2] ;
$col2=$col2+3;
}
echo '</div>';
//column 3
echo '<div class="col">';
while($col3<=$i) {
echo $Myvar[$col3] ;
$col3=$col3+3;
}
echo '</div>';
print_r ($Myvar);
?>