How can I create a floating grid using HTML and CSS? - html

Question

How would one create a layout as in the image below:
Is it possible only with the float attribute where we have four divs? I have roughly the following code and 3 is pushed down by 2 (Browsers IE8+).
#one #three {
float: left;
}
#two, #four {
float: right;
}
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
Note: height(1) + height(3) != height(2)

Answer 1

See if this code structure answers your needs ... jsFiddle Demo here
HTML
<div class="col_1">
<div id="one">1</div>
<div id="three">3</div>
</div>
<div class="col_2">
<div id="two">2</div>
<div id="four">4</div>
</div>
CSS
.col_1{
width:100px;
height:300px;
margin:1px;
float:left;
}
.col_2{
width:100px;
height:300px;
margin:1px;
float:left;
}
#one{
width:100px;
height:150px;
background:yellow;
}
#two{
width:100px;
height:200px;
background:blue;
}
#three{
width:100px;
height:50px;
background:green;
}
#four{
width:100px;
height:100px;
background:purple;
}

Answer 2

Kindly see this jsfiddle http://jsfiddle.net/pvashishat/49chp8ny/
use HTML
<div id="xxx">
<div class="left_wrap">
<div class="one"></div>
<div class="three"></div>
</div>
<div class="right_wrap">
<div class="two"></div>
<div class="four"></div>
</div>
</div>
CSS
.left_wrap {
width: 100px;
float: left;
}
.right_wrap {
width: 300px;
float: left;
}
.one, .three {
border: 1px solid #000;
height: 40px;
}
.two, .four {
border: 1px solid #000;
height: 80px;
}
#xxx {
display:inline-block;
}