three divs next to each other with two rows (six divs in total). if I do float they all go in one row - css

Question

So I got a question about DIVs. I want 2 rows with 3 divs in each, centered. But the problem is if I do clear: left; all 6 will be next o eachother. Here is how my code looks like right now and I hope you can help me out.
CSS:
.row1 {
position: absolute;
height: 270px;
}
.row2 {
position: absolute;
height: 270px;
}
.columns {
width: 190px;
height: 274;
border-top: 1px solid #EBEBEB;
border-right: 1px solid #EBEBEB;
padding-top: 25px;
padding-right: 15px;
padding-bottom: 25px;
padding-left: 15px;
}
Here is my HTML:
<div id="row1">
<div class="columns"> </div>
<div class="columns"> </div>
<div class="columns"> </div>
</div>
<div id="row2">
<div class="columns"> </div>
<div class="columns"> </div>
<div class="columns"> </div>
</div>
this is one div:
head text
paragraph text

Answer 1

They are all floating next to each other. You should add a clear row where you want to seperate them. We usually call it clearfix.
<style>
.clearfix{ clear:both; }
</style>
</div>
<div class="clearfix"></div>
<div id="row2">

Answer 2

Try to use "display: inline-block" instead of float and remove "position: absolute". Add closing divs for the columns. And change css for the rows to refer to id, not class.
CSS:
.columns {
display: inline-block;
width: 190px;
border-top: 1px solid #EBEBEB;
border-right: 1px solid #EBEBEB;
}
#row1 {
height: 270px;
}
#row2 {
height: 270px;
}
HTML:
<div id="row1">
<div class="columns">1.1</div>
<div class="columns">1.2</div>
<div class="columns">1.3</div>
</div>
<div id="row2">
<div class="columns">2.1</div>
<div class="columns">2.2</div>
<div class="columns">2.3</div>
</div>
JsFiddle: http://jsfiddle.net/a5vKH/1/