Need to set up a (if) condition within a looped <table> to break left floating.

[co.ador]

 $query = "SELECT shoe.shoename, shoe.price, shoe.moreinfo 
FROM shoe
INNER 
JOIN shoe_kind 
ON shoe.kind_id=shoe_kind.kind_id"; 
$result = mysql_query($query, $connection);
while ($row = mysql_fetch_array($result)) {
echo "<table style=\"float:left\">
<td width=\"150\" style=\"text-align:center;\">" . $row['shoename'] . "</td>
<tr>
<td height=\"100\" width=\"100\"   style=\"position:relative;\">
<img src=\"../images/shoesname.jpg\" alt=\"sd\" width=\"97\" height=\"80\"  border=\"1\" style=\"border-color:#FF6600;\" />
</td></tr>
<tr>
<td width=\"5\" height=\"21\" ></td><td>" . $row['price'] . "</td>
</tr>
<td>" . $row['moreinfo'] . "</td>
</table>";
} 

The code above contains a while loop that floats all the elements within that table to the left. Now I want the floated elements to repeat to the left only under the condition that when it repeats four times to the left to stop and go down and continue below is an ilustration of what I been trying to accomplish example:

Instead of repeating to the left all the time like this:

- - - - - - - - - - - -

I want the loop to stop when it repeat four times and then go down again and repeat four more and so on. example:

- - - -
- - - -
- - - -
- - - -

Like that.

Any body can help me?

I tried the relative position but then it keep repeating to the left endlessly, tried the absolute position but it just show the last repeated element of the loop.

it there any other option which you might come up with guys?

[JDevereux]

This uses a nested tables approach:

<?php
$query = "SELECT shoe.shoename, appetizers.price, shoe.moreinfo 
FROM shoe
INNER 
JOIN shoe_kind 
ON shoe.kind_id=shoe_kind.kind_id"; 
$result = mysql_query($query, $connection);

// initialize the counter
$count = 1;

//get the container table started
echo "<table border=\"1\"><tr>";


while ($row = mysql_fetch_array($result)) { 

// create a table with four rows and one column that represents one <td></td> in the container table
echo "<td><table border=\"1\"><tr>
<td>" . $row['shoename'] . "</td>
</tr> 
<tr>
<td><img src=\"../images/shoesname.jpg\" alt=\"sd\" width=\"97\" height=\"80\"  border=\"1\" style=\"border-color:#FF6600;\" /> </td>
</tr> 
<tr> 
<td>" . $row['price'] . "</td> 
</tr> 
<tr>
<td>" . $row['moreinfo'] . "</td>
</tr></table>
</td>";

// if there are four in a row, start a new row
if ($count == 4) {
echo "</tr><tr>"; 
}
$count++;

//reset the counter after four
if ($count == 5)
  $count = 1;
} 
// finish off the containter table
echo "</tr></table>";
?>

[co.ador]

Thank you JDevereux

I have just inserted a table outside the php tags so that instead of keep going to the left it pushs it down. But I will try your to see how it works with both. What I a did was:

<table width="40%" border="0" cellspacing="0" cellpadding="0" bordercolor="#FF0033" bgcolor="#FFFFFF" id="shoetable">
<?php $query = "SELECT shoe.shoename, shoe.price, shoe.moreinfo 
FROM shoe
INNER 
JOIN shoe_kind 
ON shoe.kind_id=shoe_kind.kind_id"; 
$result = mysql_query($query, $connection);
while ($row = mysql_fetch_array($result)) {
echo "<table style=\"float:left\">
<td width=\"150\" style=\"text-align:center;\">" . $row['shoename'] . "</td>
<tr>
<td height=\"100\" width=\"100\"   style=\"position:relative;\">
<img src=\"../images/shoesname.jpg\" alt=\"sd\" width=\"97\" height=\"80\"  border=\"1\" style=\"border-color:#FF6600;\" />
</td></tr>
<tr>
<td width=\"5\" height=\"21\" ></td><td>" . $row['price'] . "</td>
</tr>
<td>" . $row['moreinfo'] . "</td>
</table>";
} 
?></table>

[JDevereux]

On second thought, you could use the CSS clear property:

<?php

$count = 0;
while ($row = mysql_fetch_array($result)) { {
if ($count == 4) {
echo "<table style=\"float:left; clear: left;\">"; 
}
else { 
echo "<table style=\"float:left\">";
}
echo "<td width=\"150\" style=\"text-align:center;\">" . $row['shoename'] . "</td>
<tr>
<td height=\"100\" width=\"100\"   style=\"position:relative;\">
<img src=\"dog.jpg\" alt=\"sd\" width=\"97\" height=\"80\"  border=\"1\" style=\"border-color:#FF6600;\" />
</td></tr>
<tr>
<td width=\"5\" height=\"21\" ></td><td>" . $row['price'] . "</td>
</tr>
<td>" . $row['moreinfo'] . "</td>
</table>";
$count++;
if ($count == 5)
  $count = 1;
} 
?>

[co.ador]

I was forgetting about the css clear property.

It pushes it down.

Thank you JDevereux

right now I am working at work but when I come back around 12:00 am I will get my hands on both of the options you gave me.

[co.ador]

JDevereux

Your works good I just need to add it style it to top and left to it position at the point I wanted.

Thank you