I hope I explain this right.
Right now I have data being pulled via php but it is going vertical. Like the link below.
http://allfoodequip.com/used-equipment.php?Cat=Baggers
I would like to pull them horizontal like the link below.
http://equipmentforbakery.com/New/products.html
Is there any tutorial that can walk me through how to do that?
Looks like a <div> that is floated left, when it can not put any more items on a row it starts a new row.
As mentioned above the easiest option is to float the parent element of each block to the left and apply a suitable width, height (in ems) and margins. You will need a height because the floats will snag if they are not all the same height.
Or if you don’t want to (or can’t) set a height then you could use display:inline-block as shown in this old example.
I tried doing what was suggested but it is still going vertical
http://equipmentforbakery.com/New/products.php
Heres the css I used.
.thumb {
display: inline-block;
margin: 3px;
padding: 5px;
width:800px;
}
.even {}
.odd{}
#bx {
width:850px;
}
and the php looks like this
<div id="bx" class="<?php echo $tr_class;?>">
<div class="thumb"><a href="product.php?Item=<?php echo $eid; ?>"><img src="../UImages/<?php echo $imagename; ?>" width="220" height="120" alt="Thumb"></a></div>
<a href="product.php?Item=<?php echo $eid; ?>"> <b><?php echo $name; ?></b></a><br />
</div><!--bx-->
Those items are all stuck within a div set to width 220px. (Ah, the joy of grids. 
)
HTML
<div class="menu grid_4 alpha">
CSS
.container_16 .grid_4 {
width: 220px;
}
You could change that container to read
<div class="products [COLOR="#FF0000"]grid_16[/COLOR] alpha">
You’ve also got this in between each image box, which also all need to be removed:
<div style="clear:both;"> </div>
I think you misread the question. I am trying to make the first 4 (that are vertical) and make them look like the bottom rows (that are horizontal.)
Here is all of the php if it would help
<?php
$Page = @$_GET['Page'];
if ($Page < 1)
{
$Page = 1;
}
$LimitAmt = $Amt + 1;
$Limit = "LIMIT $LimitAmt";
$NextPage = $Page + 1;
$PrevPage = $Page - 1;
if ($Page > 1)
{
$Start = ($Page-1) * $Amt;
$Limit = "LIMIT $Start,$LimitAmt";
}
$SQLCat = "";
if (strlen($Cat) > 1)
{
$SQLCat = "AND (`Category` LIKE '$Cat;%' OR `Category` LIKE '%;$Cat' OR `Category` LIKE '$Cat')";
}
$SQL_GetEquipment = "SELECT * FROM `new_equip` WHERE `Condition`='Used' $SQLCat $Limit";
$R_GetEquipment = mysql_query($SQL_GetEquipment, $Link);
if (mysql_num_rows($R_GetEquipment) < $LimitAmt)
{
$NextPage = -1;
}
$i = 0;
$rowclass = 0;
//while ($i < $num)
while ($row = mysql_fetch_assoc($R_GetEquipment))
{
if ($i == $Amt)
{
break;
}
$rowclass = 1 - $rowclass;
if ($rowclass >= 1){
$tr_class = "even";
} else {
if ($rowclass <=0) {
$tr_class = "odd";
}
}
//assigns variables to the mysql columns for easier retrieve
//straight forward, if you wanted to make the "name" a link
//somewhere else in the document, you could just type something
//like i show below
/*$eid = mysql_result($result,$i,"id");
$name = mysql_result($result,$i,"name");
$model = mysql_result($result,$i,"model");
$manu = mysql_result($result,$i,"manu");
$desc = mysql_result($result,$i,"desc");
$imagename = mysql_result($result,$i,"image");*/
$eid = $row['id'];
$name = $row['name'];
$model = $row['model'];
$manu = $row['manu'];
$desc = $row['desc'];
$imagename = $row['image'];
if (!file_exists("../UImages/" . $imagename) || strlen($imagename) < 5)
{
$imagename = "NoImage.jpg";
}
?>
<div id="bx">
<div class="thumb"><a href="product.php?Item=<?php echo $eid; ?>"><img src="../UImages/<?php echo $imagename; ?>" width="220" height="120" alt="Thumb"></a></div>
<a href="product.php?Item=<?php echo $eid; ?>"> <b><?php echo $name; ?></b></a>
</div><!--bx-->
<div style="clear:both;"> </div>
<?php
$i++; // This means that i is 'i = i + 1. Will repeat this loop until it hits the value $num' We will need to modify this a little for you
}
?>
No, I think you misread the answer. 
(Although it may not have helped, anyhow.) One of the problems (though not the only problem, is this line in your code:
<div style="clear:both;"> </div>
which forces each thumbnail to sit on a new line. But that’s not the only issue.
Your code structures at the top of the page are different from the bottom. You could try modifying this
<div id="bx">
<div class="thumb"><a href="product.php?Item=<?php echo $eid; ?>"><img src="../UImages/<?php echo $imagename; ?>" width="220" height="120" alt="Thumb"></a></div>
<a href="product.php?Item=<?php echo $eid; ?>"> <b><?php echo $name; ?></b></a>
</div><!--bx-->
<div style="clear:both;"> </div>
to something like this:
<p>
<a class="grid_4 alpha" href="product.php?Item=<?php echo $eid; ?>">
<img width="220" height="120" alt="Thumb" src="../UImages/<?php echo $imagename; ?>">
</a>
<br>
<a href="product.php?Item=<?php echo $eid; ?>"> <b><?php echo $name; ?></b></a>
</p>
That way, the code at the top would use the same code as the layout at the bottom.
Still vertical.
What about this then:
[COLOR="#FF0000"]<div class="menu grid_4 alpha">[/COLOR]
<p>
<a class="grid_4 alpha" title="Matrix VFFS Bagger" href="product.php?Item=<?php echo $eid; ?>">
<img width="220" height="120" alt="Thumb" src="../UImages/<?php echo $imagename; ?>">
</a>
<br>
<a href="product.php?Item=<?php echo $eid; ?>"> <b><?php echo $name; ?></b></a>
</p>
[COLOR="#FF0000"]</div>[/COLOR]
Nope, still vertical…lol
Heres what I got now.
<?php
$Page = @$_GET['Page'];
if ($Page < 1)
{
$Page = 1;
}
$LimitAmt = $Amt + 1;
$Limit = "LIMIT $LimitAmt";
$NextPage = $Page + 1;
$PrevPage = $Page - 1;
if ($Page > 1)
{
$Start = ($Page-1) * $Amt;
$Limit = "LIMIT $Start,$LimitAmt";
}
$SQLCat = "";
if (strlen($Cat) > 1)
{
$SQLCat = "AND (`Category` LIKE '$Cat;%' OR `Category` LIKE '%;$Cat' OR `Category` LIKE '$Cat')";
}
$SQL_GetEquipment = "SELECT * FROM `new_equip` WHERE `Condition`='Used' $SQLCat $Limit";
$R_GetEquipment = mysql_query($SQL_GetEquipment, $Link);
if (mysql_num_rows($R_GetEquipment) < $LimitAmt)
{
$NextPage = -1;
}
$i = 0;
$rowclass = 0;
//while ($i < $num)
while ($row = mysql_fetch_assoc($R_GetEquipment))
{
if ($i == $Amt)
{
break;
}
$rowclass = 1 - $rowclass;
if ($rowclass >= 1){
$tr_class = "even";
} else {
if ($rowclass <=0) {
$tr_class = "odd";
}
}
//assigns variables to the mysql columns for easier retrieve
//straight forward, if you wanted to make the "name" a link
//somewhere else in the document, you could just type something
//like i show below
/*$eid = mysql_result($result,$i,"id");
$name = mysql_result($result,$i,"name");
$model = mysql_result($result,$i,"model");
$manu = mysql_result($result,$i,"manu");
$desc = mysql_result($result,$i,"desc");
$imagename = mysql_result($result,$i,"image");*/
$eid = $row['id'];
$name = $row['name'];
$model = $row['model'];
$manu = $row['manu'];
$desc = $row['desc'];
$imagename = $row['image'];
if (!file_exists("../UImages/" . $imagename) || strlen($imagename) < 5)
{
$imagename = "NoImage.jpg";
}
?>
<div class="menu grid_4">
<p>
<a class="grid_4 alpha" title="Matrix VFFS Bagger" href="product.php?Item=<?php echo $eid; ?>">
<img width="220" height="120" alt="Thumb" src="../UImages/<?php echo $imagename; ?>">
</a>
<br>
<a href="product.php?Item=<?php echo $eid; ?>"> <b><?php echo $name; ?></b></a>
</p>
</div>
<?php
$i++; // This means that i is 'i = i + 1. Will repeat this loop until it hits the value $num' We will need to modify this a little for you
}
?>
Hi, you need to float #bx :). Basically you floated the child of #bx, which doesn’t quite work because the parent is still a normal block taking up the full width. You also need to remove the width set on it, because right now it’s taking up the full width of the column :). Or you can set a fixed width (that is less than 650, but allows items to be horizontal) on it.
You also need to remove every single [LEFT]<div style=“clear:both;”> </div> you have on that section. It will never let the floating work :). How many do you want horizontally aligned? Looks like the page can only comfortably fit 2 in a row, MAYBE 3 if you squish it.[/LEFT]
#bx{float:left;}I do have the #bx floating left
.thumb {
float: left;
overflow: auto;
}
.even {}
.odd{}
#bx {
float: left;
}
It worked for me in testing with Firebug by editing the HTML (although the CSS is not perfect), but the system is somehow adding in an extra
<div class="menu grid_4">
which is messing things up. I don’t understand the PHP well enough to understand why that’s being inserted. Looks like it’s coming from above that PHP block you posted.
Are you sure? I went to your stylesheet, found the #bx, and this is all that’s applied
#bx {
width:650px; }
This is the code in the section. I took a bit from above it and below it. This is what’s showing
.thumb {
float:left;display:inline;clear:none;}.ProductWrap { float:left; vertical-align:top;margin-left:5px;display:inline;}.even {}.odd{}#bx {width:650px; }#AdminMsg { margin-top:25px; text-align:center; background-color:#FFCC00; } #product{width:600px;margin-right: auto ;}
Are you looking at this page?
http://equipmentforbakery.com/New/products.php
That link is showing hte products going horizontal. I’m very confused now. I thought your objective was to get the other link displaying horizontally? :). Sorry for being dense.
To make it easy… I want
http://equipmentforbakery.com/New/products.php
to look like
http://equipmentforbakery.com/New/products.html
So basically you want that stuff to be horizontal. Gotcha.
Well it looks like on this element below, you have a width of 220px set. Which makes it impossible for anthing to be on teh same line because there just isn’t enough width.
.container_16 .grid_4
{
/*remove the width:220px;*/
overflow:hidden;/*add*/
}
I changed those two things and it worked. It’s now displaying horizontally. You’ll have to tinker with some widths to get 4 displaying on a row (currently 3) but that’s simple. If you need help with it though, feel free to shout :).
Edit-Just so you know, that suggestion will make EVERYTHING horizontal. I can offer code if you want to select a specific section in that page, but for now, that code will select all the products (basically everything with a .grid_4 class :))
Hi,
It seems you have made the items go horizontal now but because you used floats and the elements are different heights they are snagging when they wrap exactly as I mentioned in my first post :).
You need to use inline-block so add this code without alteration after all your existing code:
.menu {
float:none!important;
display:inline-block;
*display:inline;/* ie6/7 inline-block hack - do not change order or remove anything */
zoom:1.0;/* ie6/7 inline-block hack*/
vertical-align:top;
margin-bottom:10px;
}