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.

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
  • 191 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by MarPlo

Dani AI

Generated

— good concise problem statement. ’s float idea will work once the typo (foat:left) is fixed, but floats need manual clearing and extra rules. Two simpler, more robust options are shown below: CSS Flexbox for automatic wrapping based on container width, and CSS Grid for a strict “3 per row” layout.

Example HTML structure (use semantic elements instead of deprecated <center>):

<div class="gallery">
  <figure class="videobox">
    <img class="thumb" src="thumb.jpg" alt="Video title">
    <figcaption>Title — <a href="#">View</a></figcaption>
  </figure>
  <!-- more items -->
</div>

Flexbox (wrap when container is too narrow):

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.videobox {
  flex: 0 0 calc(33.333% - 12px); /* approx 3 per row */
  box-sizing: border-box;
}
.thumb {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
@media (max-width:700px){ .videobox{ flex:0 0 100%; } }

Grid (always 3 columns unless media query changes it):

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width:700px){ .gallery { grid-template-columns: 1fr; } }

Quick troubleshooting & tips:

  • If you stick with floats, add a clearfix (.gallery::after{content:"";display:table;clear:both}) or use .videobox:nth-child(3n+1){clear:left} instead of inserting <br> via PHP.
  • Replace <center> with img { display:block; margin:0 auto; }.
  • Add width/height or aspect-ratio to images and loading="lazy" to reduce layout shift and improve performance.
  • Use box-sizing: border-box to make width math predictable.
  • Keep your server output order set so newest items appear first in the DOM (then CSS wrapping will naturally push older items to the next line).

Either flexbox or grid will give you the behavior you described with far less markup gymnastics than floating + manual breaks.

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.