Images next to each other from a foreach loop - php

Question

I'd like to put images next to each other when they are selected from a while loop in PHP.
So, currently it looks like this http://prntscr.com/7tb42j
And I'd like it to put the images next to each other.
My foreach loop looks like this:
<div id='profile-album'>
<?php
$get_fotos = "SELECT * FROM fotos_profile WHERE username=:username LIMIT 4";
$stmt = $db->prepare($get_fotos);
$stmt->bindParam(':username', $username);
$stmt->execute();
foreach($stmt as $row)
{
$pic = $row['pic'];
$title_foto = $row['title'];
?>
<div id='album-foto-1'><img src="userdata/profile_fotos/<?php echo $pic; ?>" height='100px' width='206px' style='padding-right: 6px'/></div>
<?php } ?>

Answer 1

You'll just need to add display:inline-block to each div that contains a picture.
<div id='profile-album'>
<?php
$get_fotos = "SELECT * FROM fotos_profile WHERE username=:username LIMIT 4";
$stmt = $db->prepare($get_fotos);
$stmt->bindParam(':username', $username);
$stmt->execute();
foreach($stmt as $row)
{
$pic = $row['pic'];
$title_foto = $row['title'];
?>
<div id='album-foto-1' style="display:inline-block"><img src="userdata/profile_fotos/<?php echo $pic; ?>" height='100px' width='206px' style='padding-right: 6px'/></div>
<?php } ?>

Answer 2

Make sure on "album-foto" you have the css set for (see below why I use album-foto not album-foto-1):
.album-foto {
display:inline; // or inline-block depending how you want to be displayed
}
Also if you're displaying multiple images you should use a class not an ID for the images as duplication of the same ID is not good:
foreach($stmt as $row)
{
$id = $row["id"]; // or whatever your ID field is
$pic = $row['pic'];
$title_foto = $row['title'];
?>
<div class='album-foto' id='album-foto-<? echo $id; ?>'><img src="userdata/profile_fotos/<?php echo $pic; ?>" height='100px' width='206px' style='padding-right: 6px'/></div>
<?php } ?>