How do I limit the number of SQL results but also allow full width?

I have 10 movies on one page. I want 5 movies on each row. However, I also want to give the div enough width to allow the 5 movies ability to stretch. Each movie will have images on top of them. The images are friends of that user. These friends are on top of a movie because they are friends with that user and have liked that specific movie. These images require the movies needing more space.

I have included an image to help illustrate my problem:

The red border represents the space I have to move around. I only want 5 movies and their respective elements. However, some of the elements from the second row are linking to the first row.

Question: How do I give each row space, but also limit each row to 5 elements?

EDIT

I found a solution to the problem. These movies are created by a PHP while loop. Each time the while loop occurs, $number increases by one. I created the following if statement:

if($number == 5) {
echo "<br>";
}

$number++;

Is this a good solution? The table idea is certainly good, I would only be worried about styling issues...

Answers


There are a bunch of ways to do this. One simple route would be to make a table with HTML:

<table class="movies-row">
  <tr>
    <td>movie-1</td>
    <td>movie-2</td>
    <td>movie-3</td>
    <td>movie-4</td>
    <td>movie-5</td>
  </tr>
  <tr>
    <td>movie-6</td>
    <td>movie-7</td>
    <td>movie-8</td>
    <td>movie-9</td>
    <td>movie-10</td>
  </tr>
</table>

...and then declare a CSS class in your stylesheet to full up the whole row:

.movies-row {
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

Need Your Help

Geolocation sharing Dialog is not showing every time on page refresh

javascript android iphone w3c-geolocation

Have written Geolocation API code for android and iphone. Take reference from http://dev.w3.org/geo/api/spec-source.html. One dialog box is showing - asking for sharing device current location. Onc...

UIViewController title can't be "Message"?

ios uiviewcontroller

This is a weird question. Whenever I set UIViewController title to "Message", the text disappeared. Is there any way to fix it?