Making sequence of fixed-width <div>s display in rows by four - php

Question

I have this code:
<div style="margin: 0 auto; display:block; width: 916px; overflow: auto;">
<?php echo "";
echo "<i>Owned: $line->phone </i><br><br>";
$query = "SELECT person_id, person.name, person.sex, person.father_id, person.mother_id,PhotosComp.reference as reference
FROM person
WHERE person.id=$currId";
$result = mysql_query($query);
if (mysql_num_rows($result)>0) {
while ($line = mysql_fetch_object($result)) {
echo "<div valign='top'>";
echo "";
echo "<img src=".$line->reference." style=float:left; height='50px' border='1'>";
echo "";
echo "<a href='details.php?id=$line->person_id'>";
echo "<b>";
echo "$line->name</a>";
echo "</b>, <font size='-2'>(";
echo "$line->sex";
echo ", </font><font size='-2'>";
echo "$line->father_id";
echo "<br>";
echo "$line-mother_id";
echo "<br>";
echo "</div>";
}
}echo "";
?>
</div>
The info is shown correctly vertical… but I would like to show lets say 4 results horizontal before it breaks into new line.
So I get this result from the database as it is now:
PICTURE Bob
Mick
Jane
PICTURE Roy
Mack
June
PICTURE Mia
Roy
Jane
PICTURE Lou
Bob
June
PICTURE Bib
Mock
Jine
PICTURE Beb
Muck
Jone
PICTURE Ray
Rob
Mia
And would like it to be shown as this:
PICTURE Bob PICTURE Roy PICTURE Mia PICTURE Lou
Mick Mack Roy Bob
Jane June Jane June
PICTURE Bob PICTURE Roy PICTURE Mia
Mick Mack Roy
Jane June Jane
The results from DB can be 0 to 15–20. I don’t need any upper limit.

Answer 1

Try this , let me know if it works .
if (mysql_num_rows($result)>0)
{
$counter = 0;
while ($line = mysql_fetch_object($result))
{
if($counter %4 != 0)
{
#this will break your div
echo "<div valign='top' style='clear:both;'>";
}
else
{
echo "<div valign='top' style='float:left;display:block;'>";
}
//if ($line->reference = (NULL)) { echo "<img src=".$line->reference." style=float:left; height='50px' border='1'>";
//else echo "<img src='../temp_pic.jpg' style=float:left; height='50px' border='1'>";}
echo "";
echo "<a href='page.php?id=$line->person_id'>";
echo "<b>";
echo "$line->name</a>";
echo "</b><br>";
echo "line->father_id";
echo"<br>";
echo "line->mother_id";
$counter++;
}
echo "</div>";
}

Answer 2

Some scaffolding like this might get you closer to your goal. as #DanFromGermany explained, you need to clear:both underneath your div elements. Try not to put style tags in your markup, unless your page is super optimised or something.
markup
while($result) {
echo "<div class=\"span-3\">";
echo "<div>";
echo "the content father->id line->person_id etc etc";
echo "</div>";
echo "</div>";
}
echo "<div class=\"clear-fix\"></div>";
css
.span-3 {
width:25%;
float:left;
margin:0; padding: 0;
}
.span-3 > div {
margin: 10px; /* or some other value */
}
.clear-fix {
clear:both;
}

Answer 3

Here is a basic bit of code to show pictures in the format you require. You will need to change this to match up with your while loop and also change the clases and css code to match your requirements ie page width etc.
<style>
html {width:100%; background:#ffffff;}
body {max-width: 960px; background:red; margin:0 auto;}
img {max-width: 225px; height: auto;}
.clear {clear:both;}
.no-margin{margin:0 !important;}
.margin-right {margin-right: 20px;}
</style>
<div class="pic-wrap">
<?php
$pictures[] = 'http://www.canoefoundation.org.uk/cf/assets/Image/Yellow%20Duck.jpg';
$pictures[] = 'http://www.canoefoundation.org.uk/cf/assets/Image/Yellow%20Duck.jpg';
$pictures[] = 'http://www.canoefoundation.org.uk/cf/assets/Image/Yellow%20Duck.jpg';
$pictures[] = 'http://www.canoefoundation.org.uk/cf/assets/Image/Yellow%20Duck.jpg';
$pictures[] = 'http://www.canoefoundation.org.uk/cf/assets/Image/Yellow%20Duck.jpg';
$pictures[] = 'http://www.canoefoundation.org.uk/cf/assets/Image/Yellow%20Duck.jpg';
$pictures[] = 'http://www.canoefoundation.org.uk/cf/assets/Image/Yellow%20Duck.jpg';
$pictures[] = 'http://www.canoefoundation.org.uk/cf/assets/Image/Yellow%20Duck.jpg';
$pictures[] = 'http://www.canoefoundation.org.uk/cf/assets/Image/Yellow%20Duck.jpg';
$pictures[] = 'http://www.canoefoundation.org.uk/cf/assets/Image/Yellow%20Duck.jpg';
$count = count($pictures);
$i=1;
foreach($pictures as $picture)
{
if($i % 4 == 0)
{
echo '<img src="'.$picture.'" class="no-margin four">';
}
elseif($i == $count)
{
echo '<img src="'.$picture.'" class="margin-right">';
echo '<div class="clear"></div>';
}
else
{
echo '<img src="'.$picture.'" class="margin-right">';
}
$i++;
}
?>
</div>
Here is an image of the output
Much like #DanFromGermany mentioned this clears floats and also adds a clear at the end by using a count of the results.
$count = count($pictures);
It then determines the last result form this
elseif($i == $count)
With $i being incremented on each iteration of the loop.
$i++;
Hope this helps.