displaying items from database in rows - php

Question

This image shows my website's homepage.
http://i163.photobucket.com/albums/t315/smc22_2007/Website.png
I want rows of 4, not rows of 5.
Here is my php code:
<?php
$query = "SELECT * FROM UFPProducts";
$results = mysql_query ($query, $connect);
while ($row = # mysql_fetch_array($results))
{
print
"<div id= 'item'>" .
"<p>Product id ".$row["ProductID"]."</p>".
"<p><img src=".$row["Image"]."></p>".
"<p>&pound".$row["Price"]."</p>".
"<p>".$row["Description"]."</p>".
"</div>";
}
Here is the CSS for the above:
#item {
width:100px;
text-align:center;
border: 1px solid #D9D9D9;
padding: 0px;
list-style: none;
width: 150px;
float: left;
margin-right: 15px;
margin-bottom: 15px;
border-radius: 10px;
-moz-border-radius: 10px; /* firefox rounded corners */
-webkit-border-radius: 10px; /* Safari rounded corners */
min-height: 220px;
}
#item li h1 {
text-align:center:
}
#item li#white{
min-height: 220px;
}
How can I display rows of 4, not 5?
Thankyou

Answer 1

From looking at the code, there doesn't seem to be anything that "forces" five rows that you could simply change to four. It is quite possible that the width of the parent element naturally causes the items to appear in rows of five. If that is the case, you have a couple of options. You could add left and/or right margins or change the widths of the items to make them wider and force them to overflow to the next row sooner. Or, you could implement a counter in the PHP that would add a <br> tag (or similar) after every four items. You could also shrink the parent element, though that might not be an option. The CSS options are simple enough, in #item, increase the width:
#item {
width:100px;
/*... other css ...*/
}
In the PHP:
<?php
//rest of code
$counter=0;
while ($row = # mysql_fetch_array($results))
{
print
"<div id= 'item'>" .
"<p>Product id ".$row["ProductID"]."</p>".
"<p><img src=".$row["Image"]."></p>".
"<p>&pound".$row["Price"]."</p>".
"<p>".$row["Description"]."</p>".
"</div>";
$counter++;
if ($counter==3) {
$counter=0;
print "<br>";
}
}

Answer 2

Your products are currently set to float with a width of 150px. Since you're floating it will continue to add items until they don't fit (ie, if your items are 10px wide in a 75px wide container and you add 8, you'll see 7 on one 'row' with 1 on the next). You can simply increase the width to fit the container that your products are in until you've got 4 items per 'row'. Your margins and any padding also add to this so keep that in mind.
#item {
...
width: 200px;
...
}
If you don't want to increase the width of your product cells, then increase the margin to the increase the effective width of the elements.
#item {
...
margin-right: 20px;
...
}
You should also update your items to use a class instead of an ID since ID are supposed to be unique on a page.
.item {
...
}
<div class='item'>...</div>

Answer 3

As far as I see, while loop does not enforce any restrictions. Well my suggestion would be something like this:
$i = 1;
$cssClass = 'item';
$columns = 4;
while ($row = # mysql_fetch_array($results))
{
$class = $cssClass;
if (($i % $columns) == 0) {
$class .= ' clear';
}
print "<div id='{$class}'>" .
"<p>Product id " . $row["ProductID"] . "</p>" .
"<p><img src=" . $row[" Image"] . "></p>" .
"<p>&pound" . $row["Price"] . "</p>" .
"<p>" . $row["Description"] . "</p>" .
"</div>";
$i++;
}
And then in css define:
.clear { clear:both; }