View Full Version : display products in a grid like way

04-22-2011, 10:48 AM
Hi all

im building a site where I would like to present the users with an overview of products in either rows or in a grid.., displaying them in rows works fine, but I cannot get them to show in a grid ( 3 next to each other)

can anyone point me to the right way to do this?

here you see a page which shows products in rows..

url for the site : http://beta.prijsjagers.be/nintendo-ds~1166.htm

I do not manage to apply css to show them in a grid

I think its should be done with float left, but i cannot implement this correctly

help appreciated,


04-22-2011, 11:07 AM
use the float (to put the divs side by side)and the clear(to start a new "row") CSS properties

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
border:solid 1px #ff0000;
border:solid 1px #000;
<div id="container">

<div class="left"> prod 1_1</div>
<div class="left"> prod 1_2</div>
<div class="left"> prod 1_3</div>
<div class="clear"></div>
<div class="left"> prod 2_1</div>
<div class="left"> prod 2_2</div>
<div class="left"> prod 2_3</div>
<div class="clear"></div>
<div class="left"> prod 3_1</div>
<div class="left"> prod 3_2</div>
<div class="left"> prod 3_3</div>
<div class="clear"></div>


04-22-2011, 11:11 AM
this is my current code :

<div style="clear:both;"></div>
<div class="ListingRow">
<div class="ListingHr"></div>
<div class="ListingCheckbox">
<input type="checkbox" name="chkCompare" id="idCompareChk<?=$pId?>" value="<?=$pId?>">
<div class="ListingThumbnail">
<?= getProductThumbnail($pId, $pLink, $row['TITLE'], $cId, '90', '90', 'ListingThumbnailBox') ?>
<div class="ListingRowRight">
<div style="clear:both;"></div>
<div class="ListingRowRightLeft">
<a href="<?=$pLink?>" class="linkLarge" title="<?=strip_tags($pTitle)?>"><?=$pTitle?></a>
<font class="PLDetail"><?=$pDetail?></font>
<?=getProductRating($pId, $pRating, $pFilename, $cId, $cFilename)?>
<div class="ListingRowRightRight">
<font class="PLPrice">
<?= getFormattedPrice($pMinPrice, $currencySymbol, $currencyRate)?>
<?= $pMinPrice==$pMaxPrice?'':(" - ".getFormattedPrice($pMaxPrice, $currencySymbol, $currencyRate)) ?>
<? getUserProductLink($pId, $storeCount, $pLink) ?>

how do i change this to work ?

my css is in a seperate file