Orderng stock in rows of 3 down the page

PHP
1

Happy new year everyone, good to be back on here.

I had developed a part of a website where a client uploads their stock to the database, and then on choice of category the stock is displayed nicely in rows of three down the page, but as always I didnt take into consideration that some stock will have a longer image which I cant get around and so the row beneath that then gets pushed all out, and its loses its shape.

Basically what I would like to have is that even if say one of the images in the row above makes that stock area longer, the row underneath starts below that one, and continues in a nice row, and so on down the page.

Here is my code, which works fine when all the stock areas are the same, but wondered if anybody can help me with this.


<div id="sub_stock_holder">
<?php
  $qw=mysql_query("select * from stock where (sub_Category='$parentcat') and stock_Active=1");
  while($r=mysql_fetch_assoc($qw)){
?>
<div class="sub_stock" style="background-color:#990;">
<div class="sub_title"><?=substr($r['stock_Name'],0,62)."..."?></div>
<div class="sub_Image"><a href="detail.php?stock_ID=<?=$r['stock_Id']?>" title="<?=$r['stock_MetaTitle']?>"><img src="./adminSallam/<?=$r['stock_Image']?>" width="210" title="<?=$r['stock_MetaTitle']?>" border="0" style="border:#333333 solid 1px;" alt="<?=$r['stock_MetaTitle']?>" /></a></div>
<div class="sub_Description"><p><?=substr($r['stock_Description'],0,100)." ..."?></p></div>
<? if ($r['stock_Sold'] == "0") { ?>
<div class="sub_Price">£<?=$r['stock_Price']?></div>
<? } else { ?>
<div class="sub_Price">SOLD</div>
<? } ?>
<div class="sub_move" style="position:relative; width:100%; margin-top:15px; text-align:center;"><a href="detail.php?stock_ID=<?=$r['stock_Id']?>" title="Click here to view '<?=$r['stock_Name']?>' in full.">click here to read more</a></div>
</div>
<? } ?>
</div>

The site and its obvious problem is below:

[http://www.accendsandbox.co.uk/stock_sub.php?sub_Id=21&choice=Silver Claret Jugs&cat=74&catName=Silver](http://www.accendsandbox.co.uk/stock_sub.php?sub_Id=21&choice=Silver Claret Jugs&cat=74&catName=Silver)

Thanks

2

Well, aside from using PHP to do this, have you tried CSS solutions? (Wrap a row of items in another DIV so that it acts as a solid unit?)

You could also use PHP/HTML to enforce a height restriction on images…

PS: I’m not a CSS Guru, so what I suggested above may be considered a CSS sin.
Tagging a couple of people for input; our member of the month @ronpat and CSS Guru of the Year @Paul_O_B

3

Hi StarLine,

I think I tagged them correctly, so will wait and see what they say.

The css way works with div’s and that would be an answer to it, but to try and get it working seems a no go as my php isnt set out correctly I dont think.

Thanks anyway

4

Your PHP looks fine, I had the same issue and the only thing I could do was place the three elements into a div in my PHP output, and make that div clear the float of the CSS, so it would keep each group on a separate line. That then forces gaps between groups (which for me was undesirable), but it was the only outcome I could acheive.

5

Ye I see what you mean, and its a bit of a tricky one isnt it.

Glad you got stumped by it though, I wasnt sure to post it as it seemed a bit silly.

Will give that a go and see.

Thanks

6

Possibly use CSS to resize the photo to a max length?

7

mmm, that possibly could work and then just stretch the wrapper div for each one to a maximum length then too.