2 x 2 div grid using float with min-height
<div class="boxContainer">
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
</div>

.boxContainer{
    width: 800px;
    height: auto;
}

.box{
    float: left;
    min-height: 150px;
    width: 400px;
}

<div class="boxContainer clearfix">
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
</div>

.boxContainer{
    width: 800px;
    height: auto;
}

.box{
    float: left;
    min-height: 150px;
    width: 400px;
    display: block;
}
/* I would put this at the top of the page, and minimise the newlines :) if you want to remove the "." (dot) then use this  content: "0A0"; which puts a whitespace,  */
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}