How to apply margin on DIV when printing with loop? - php

Question

Here is my Code:
<?php
$qr = mysql_query("SELECT * FROM products");
while($res = mysql_fetch_array($qr)):
?>
<div class="box">
<p><?php echo $res[1]; ?></p>
<img src="<?php echo $res[3]; ?>" width="100" /><br />
View Data Sheet
</div>
<?php
endwhile;
?>
I want the output of the fetched record like this http://jsfiddle.net/CqYhE/3/
Please help me that how can I apply margin of 10px on both sides (left & right), only on the center div of each row when printing it with php loop.

Answer 1

Here is your solution:
This will work for N divisions.
<?php
$qr = mysql_query("SELECT * FROM products");
$count = 1;
$margin='';
while($res = mysql_fetch_array($qr)):
$count == 2 ? $margin='style="margin:0px 10px;"' : $margin = '';
$count == 3 ? $count = 1 : $count++;
?>
<div class="box" <?php echo $margin; ?>>
<p><?php echo $res[1]; ?></p>
<img src="<?php echo $res[3]; ?>" width="100" /><br />
View Data Sheet
</div>
<?php
endwhile;
?>

Answer 2

Use css :first-child and :last-child selectors
#container .box{
float: left;
width:245px;
height:200px;
background-color:#0CC;
margin-bottom:10px;
margin-left:10px;
margin-right:10px;
}
#container .box:first-child,
#container .box:last-child { margin-left:0px; margin-right:0px;}
if you have Multiple Rows you will need to change you html to make it easy : See This DEMO

Answer 3

This is best achieved with a CSS solution. If you forget about the left margin and just apply a right one you can then remove it from the last-child. Fewer lines of CSS so better performance.
.box{
float: left;
width:245px;
height:200px;
background-color:#0CC;
margin: 0 20px 10px 0;
}
.box:last-child {
margin-right: 0;
}