Member Avatar for BleepyE

Im trying to build a video gallery and ive build the gallery in HTML first and used a table to display each thumbnail in 3 rows.

Now Ive build a php script so I can add new video thumbnails easily. How can I display a series of divs in a table like format so that when I add a new video and the thumbnail is added to the top of the series of thumbnails, it pushes each other div along and onto a new line. Ive attached some screenshots to better illustrate what I want to achieve.
http://imgcrave.com/u/nEtK9.png
http://imgcrave.com/u/rASC0.png

I either need a method of breaking when the div cant fit into the parent container, or after a set number of divs are on a row.

Thank you.

My PHP Script

<?php
require_once('config.php');

mysql_select_db(DB_NAME);

$result = mysql_query("SELECT * FROM videos ORDER BY id DESC") or die(mysql_error());

while($row = mysql_fetch_assoc($result)) {
echo "<div class='videobox'>";
echo "<div class='videotitle'>" . $row['title'] . "</div>";
echo "<center><img src='" . $row['thumb'] . "' alt='thumb' class='videothumb' /></center>";
echo "<div class='videoview'><a href='" . $row['videourl'] . "'>View Now</a></div>";
echo "</div>";
}
?>
  • 2 Contributors
  • 1 Reply
  • 182 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by MarPlo
Member Avatar for MarPlo

Hi,
Try with this code:

<?php
require_once('config.php');
mysql_select_db(DB_NAME);
$result = mysql_query("SELECT * FROM videos ORDER BY id DESC") or die(mysql_error());
$r = 0;
while($row = mysql_fetch_assoc($result)) {
echo '<div class="videobox" style="foat:left; margin:10px 12px;">';
echo "<div class='videotitle'>" . $row['title'] . "</div>";
echo "<center><img src='" . $row['thumb'] . "' alt='thumb' class='videothumb' /></center>";
echo "<div class='videoview'><a href='" . $row['videourl'] . "'>View Now</a></div>";
echo "</div>";
$r++;
if(($r%3) == 0) echo '<br style="clear:both;" />';
}
?>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.