Align items in 3's in PHP using HTML - php

Question

Good Day All,
I am trying to align items in a row of 3. At the top of each row there is a div called "". The purpose of this div is to open a new and after every 3 items the div must be close and another one opened. I have tried the below code to my suprise it is not working. This is very weird as the MOD operand should work. Cna any of you see what I could be doing wrong?
The write picture should look like this
It is out of alignment and the blue colour fills the whole page. I do not know what I am doing wrong:
$currentRow = 1;
echo '<div class="top-box">';
while($Data=mysqli_fetch_array($Result))
{
echo '<div class="col_1_of_3 span_1_of_3">
<a href="Single.php?Query='.$Data[5].'">
<div class="inner_content clearfix">
<div class="product_image">
<img src="images/'.$Data[14].'" height="300" width="320" alt=""/>
</div>
<div class="price">
<div class="cart-left">
<p class="title">'.$Data[11].'</p>
<div class="price1">
<span class="actual">R'.$Data[13].'</span>
</div>
</div>
<div class="cart-right"> </div>
<div class="clear"></div>
</div>
</div>
</a>
</div>';
$currentRow++;
if($currentRow % 3 == 0)
{
echo '</div> ';
echo '<div class="top-box">';
}
}
When I manually repeat the items every 3 items like below, it works perfectly:
<div class="top-box">
<div class="col_1_of_3 span_1_of_3">
<a href="Single.php">
<div class="inner_content clearfix">
<div class="product_image">
<img src="images/1st_Party_Boy.jpg" height="300" width="320" alt=""/>
</div>
<div class="price">
<div class="cart-left">
<p class="title">His First Party</p>
<div class="price1">
<span class="actual">R350.00</span>
</div>
</div>
<div class="cart-right"> </div>
<div class="clear"></div>
</div>
</div>
</a>
</div>
<div class="col_1_of_3 span_1_of_3">
<a href="Single.php">
<div class="inner_content clearfix">
<div class="product_image">
<img src="images/Her_First_Party.jpg" height="300" width="320" alt=""/>
</div>
<div class="sale-box"><span class="on_sale title_shop">New</span></div>
<div class="price">
<div class="cart-left">
<p class="title">Her First of Many </p>
<div class="price1">
<span class="actual">R350.00</span>
</div>
</div>
<div class="cart-right"> </div>
<div class="clear"></div>
</div>
</div>
</a>
</div>
<div class="col_1_of_3 span_1_of_3">
<a href="Single.php">
<div class="inner_content clearfix">
<div class="product_image">
<img src="images/First_one_for_boys_and_girls.jpg" height="300" width="320" alt=""/>
</div>
<div class="price">
<div class="cart-left">
<p class="title">Their First Birthday</p>
<div class="price1">
<span class="actual">R350.00</span>
</div>
</div>
<div class="cart-right"> </div>
<div class="clear"></div>
</div>
</div>
</a>
</div>
<div class="clear"></div>
</div>

Answer 1

Hey change $currentRow to zero
$currentRow = 0;
echo '<div class="top-box">';
while($Data=mysqli_fetch_array($Result))
{
echo '<div class="col_1_of_3 span_1_of_3">
<a href="Single.php?Query='.$Data[5].'">
<div class="inner_content clearfix">
<div class="product_image">
<img src="images/'.$Data[14].'" height="300" width="320" alt=""/>
</div>
<div class="price">
<div class="cart-left">
<p class="title">'.$Data[11].'</p>
<div class="price1">
<span class="actual">R'.$Data[13].'</span>
</div>
</div>
<div class="cart-right"> </div>
<div class="clear"></div>
</div>
</div>
</a>
</div>';
$currentRow++;
if($currentRow % 3 == 0)
{
echo '</div> ';
echo '<div class="top-box">';
}
}