Create 6 boxes with css - css

Question

I really need some help with some easy css that I just can't get my head around.
I want to create boxes like in the link below.
I guess I could have the code for just one of them, and then use it over and over again, but how do I create the boxes so that they don't mind the other stuff around them?
Example here: http://s23.postimg.org/qypbfvv0r/boxes.jpg

Answer 1

Here: I have figured out a way of doing this. I hope that this helps you in some way in helping you figure out how to finish your task.
HTML:
<div class="containers">
<p class="heading">Heading</p>
<div class="inner1"></div>
<div class="inner2"></div>
</div>
<div class="containers">
<p class="heading">Heading</p>
<div class="inner1"></div>
<div class="inner2"></div>
</div>
<div class="containers">
<p class="heading">Heading</p>
<div class="inner1"></div>
<div class="inner2"></div>
</div>
CSS:
.containers {
width: 300px;
height: 150px;
border: 1px solid black;
margin-bottom: 10px;
overflow: hidden;
position: relative;
}
.inner1 {
margin-left: 5px;
width: 135px;
height: 80px;
border: 1px solid black;
background-color: blue;
}
.inner2 {
position: relative;
float: right;
top: -60%;
margin-left: 5px;
margin-right: 5px;
width: 135px;
height: 80px;
border: 1px solid black;
background-color: red;
}
.heading {
padding-left: 20px;
}

Answer 2

You can start off using this code. After this you can give border styles and colors to the individual divs.
<div>
<div style="float:right"> Content </div>
<div style="float:left"> Content </div>
</div>
<div style="padding-top:10px">
<div style="float:right"> Content </div>
<div style="float:left"> Content </div>
</div>
<div style="padding-top:10px">
<div style="float:right"> Content </div>
<div style="float:left"> Content </div>
</div>
Hope this helps