Line break not working as intended in php - php

Question

I'm trying to create a square, created of smaller red and blue squares. The problem is, when i want to use something wierd happens, every new line is off by 20 px.
<style>
.box{
background-color: red;
position: relative;
width: 20px;
height: 20px;
margin-left: 3px;
margin-top: 3px;
float:left;
}
.box1{
background-color: blue;
position: relative;
width: 20px;
height: 20px;
margin-left: 3px;
margin-top: 3px;
float:left;
}
</style>
<?php
for($a=0;$a<4;$a++){
for($i = 0; $i < 4; $i++)
{
echo "<div class= box> </div>";
echo "<div class= box1> </div>";
}
echo "<br />";
for($i = 0; $i < 4; $i++)
{
echo "<div class= box> </div>";
echo "<div class= box1> </div>";
}
echo "<br />";
}
?>
How it looks like

Answer 1

Using relative position is the problem. Use display:inline-block instead.
Also you can accomplish this only using 2 for loops.
<style>
.box{
background-color: red;
width: 20px;
height: 20px;
margin-left: 3px;
margin-top: 3px;
display: inline-block;
}
.box1{
background-color: blue;
width: 20px;
height: 20px;
margin-left: 3px;
margin-top: 3px;
display: inline-block;
}
</style>
<?php
for($a=0;$a<8;$a++){
for($i = 0; $i < 4; $i++)
{
echo "<div class= box> </div>";
echo "<div class= box1> </div>";
}
echo "<br />";
}
?>

Answer 2

The proper way to break float is to use clear style attribute. For example add this to your styles:
br{
clear:both;
}
<br /> will now reset the float of the divs after it, so the next ones will be in new line.
Example in here.
Please note that class attribute should be in quotes, your code is not a valid HTML. To make it valid use one of these:
echo "<div class='box'> </div>";
or
echo '<div class="box"> </div>';

Answer 3

From my point of view you have to add one main div as like below code and have to add float left and width to 100%;
<style>
.box{
background-color: red;
position: relative;
width: 20px;
height: 20px;
margin-left: 3px;
margin-top: 3px;
float:left;
}
.box1{
background-color: blue;
position: relative;
width: 20px;
height: 20px;
margin-left: 3px;
margin-top: 3px;
float:left;
}
.main {
float:left;
width:100%;
}
</style>
<?php
for($a=0;$a<4;$a++){
echo "<div class='main'>";
for($i = 0; $i < 4; $i++)
{
echo "<div class= box> </div>";
echo "<div class= box1> </div>";
}
echo "</div>";
echo "<br />";
echo "<div class='main'>";
for($i = 0; $i < 4; $i++)
{
echo "<div class= box> </div>";
echo "<div class= box1> </div>";
}
echo "</div>";
echo "<br />";
}
?>