display products in a grid like way

prijsjager · 04-22-2011, 09: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,

K.

Kor · 04-22-2011, 10:07 AM

use the float (to put the divs side by side)and the clear(to start a new "row") CSS properties

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<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">
#container{
border:solid 1px #ff0000;
}
.left{
float:left;
width:100px;
border:solid 1px #000;
height:25px;
padding:5px;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<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>               

</div>
</body>
</html>

prijsjager · 04-22-2011, 10:11 AM

this is my current code :

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>
						<div class="ListingThumbnail">
							<?= getProductThumbnail($pId, $pLink, $row['TITLE'], $cId, '90', '90', 'ListingThumbnailBox') ?>
						</div>
						<div class="ListingRowRight">
							<div style="clear:both;"></div>
							<div>
								<div class="ListingRowRightLeft">
									<a href="<?=$pLink?>" class="linkLarge" title="<?=strip_tags($pTitle)?>"><?=$pTitle?></a>
									<br>
									<font class="PLDetail"><?=$pDetail?></font>
									<br><br>
									<?=getProductRating($pId, $pRating, $pFilename, $cId, $cFilename)?>
								</div>
								<div class="ListingRowRightRight">
									<br>
									<font class="PLPrice">
										<?= getFormattedPrice($pMinPrice, $currencySymbol, $currencyRate)?>
										<?= $pMinPrice==$pMaxPrice?'':(" - ".getFormattedPrice($pMaxPrice, $currencySymbol, $currencyRate)) ?>
									</font>
									<br><br>
									<? getUserProductLink($pId, $storeCount, $pLink) ?>
								</div>
							</div>
						</div>
					</div>

how do i change this to work ?

my css is in a seperate file