Logic error creating DIV grid with CSS and PHP - php

Question

I am having trouble figuring out the logic in creating a grid using DIVs. 3 Columns (the $count variable), then fill those columns with however many boxes. ($totalBoxes)
Below is an example of what I would like to accomplish.
I have tried using logic on repeated regions for tables, but I don’t know if that is working right. Most of my code spits out something like this screenshot:
Can someone point me where my logic is wrong?
CSS
<style type="text/css">
#container {
background-color: #FFC;
height: 750px;
width: 900px;
padding: 5px;
}
#container #column {
background-color: #FC6;
width: 200px;
padding: 5px;
float: left;
margin: 5px;
}
#container #column #box {
background-color: #9C3;
height: 150px;
width: 150px;
margin: 5px;
}
</style>
PHP
<div id="container">
<?php
$count = 3;
$totalBoxes = 8;
?>
<?php for ($i = 1; $i <= $totalBoxes; $i++) {
if ($i % $count == 1){ ?>
<div id="column"> Column <?php echo $i; ?>
<?php } else { ?>
<div id="box"> <?php echo $i; ?> </div>
</div>
<?php } } ?>
</div>

Answer 1

You have error in else thread because you have two closing divs in it.
Also you can't have repeated id
I can't understand do you want 3 columns or 3 rows? If you want 3 columns that your code will not work on totalBoxes mote than 9 (it will produce more columns).
I suggest you to use following logic:
<style>
.column {float: left; padding: 10px; width: 100px; border: solid thin red; background-color: green; margin-right: 5px}
.box {width: 100%; height: 100px; background-color: white; margin-bottom: 5px; }
</style>
<?php
$boxes_in_column = ceil($totalBoxes / 3);
echo('<div class="column">Column 1');
for ($i = 1; $i <= $totalBoxes; $i++) {
echo('<div class="box">'.$i.'</div>');
if (($i % $boxes_in_column) === 0){
echo('</div><div class="column">Column '.(ceil($i / $boxes_in_column)+1));
}
}
echo('</div>');
?>
It will produce extra empty column if you have total boxes divided by 3 without remainder. So try to fix it yourself.
Horizontal fill
<style>
.box1 {display: inline-block; width: 100px; height: 100px; background-color: white; margin: 5px; }
.parent {background-color: blue; border: solid thin red; width: 330px}
</style>
<?php
$totalBoxes = 13;
echo '<div class="parent">';
for ($i = 1; $i <= $totalBoxes; $i++) {
echo('<div class="box1">'.$i.'</div>');
}
echo '</div>';
?>