Alex Chang Alex Chang - 3 years ago 212
CSS Question

Place two figure images side by side

So I am making this website where users can upload images of movies. I would like three images in a row, but each image is being placed under each other. Here is what my website currently looks like: image

How do I make them and other upcoming images side by side (well, three in every row)?

Here is my code for the images:

$sql = "SELECT * FROM movieimg";
$query = $mysqli->query($sql);

if ($query->num_rows > 0) {
while ($row = $query->fetch_array()) {
$id = $row['id'];
$movie_name = $row['name'];
$movie_img = $row['url'];
$movie_date = $row['m_date'];

echo "<figure class='container'><div
class='movie_img'><img id='" . $id . "' class='" . $id . "'
src='/images/movies/" . $movie_img . "' width='175' height='250'>
echo "<div class='caption'><figcaption>" .
$movie_name . "</figcaption>";
echo "<figcaption>(" . $movie_date . ")
} else {
echo "<div class='no-movies'>[ There are no movies yet! ]</div>";

Here is my styling aka CSS:

.container {
width: 301px;
margin: 40px;
.movie_img {
display: block;
padding: 50px;

Again, how do I make the images and other upcoming images side by side? Thanks in advance.

Answer Source

section div {
  width : calc(33% - 12px);
  margin : 10px 10px 0 0;
  background : red;
  border : 1px solid #000000;
  height: 200px;
  float : left;

section div:nth-child(3n+1) {
  clear : left;

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download