Making a 4 blocks layout (2 superimposed) - html

Question

I would like to a 4 blocks layout like this:
I've been trying things with float but I really don't master it.
How can I do that ?
Thanks
My HTML code:
<div id="colonne_gauche">1</div>
<div id="colonne_gauche2">2</div>
<div id="colonne_droite">4</div>
<div id="colonne_centre">3</div>
My CSS code:
#colonne_gauche
{
margin-top: 5px;
-float: left;
width: 420px;
height: 145px;
border: 1px solid #818181;
background: red;
}
#colonne_gauche2
{
float: left;
margin-top: 5px;
width: 420px;
height: 145px;
border: 1px solid #818181;
background: orange;
}
#colonne_centre
{
float: right;
margin-top: 5px;
margin-left: 5px;
margin-right: 5px;
width: 310px;
height: 295px;
border: 1px solid #818181;
background: green;
}
#colonne_droite
{
float: right;
margin-top: 5px;
width: 220px;
height: 295px;
border: 1px solid #818181;
background: blue;
}
I just played a little with the floating and see what that does.

Answer 1

This should help you: DEMO.
HTML:
<div id="header">Header</div>
<div id="stackleft">
<div id="one">1</div>
<div id="two">2</div>
</div>
<div id="stackright">
<div id="three">3</div>
<div id="four">4</div>
</div>
CSS:
#header {
width: 960px;
padding: 50px 0px;
color: black;
border: 1px solid black;
margin: 5px;
text-align: center;
}
#one {
width: 420px;
text-align: center;
padding: 0px;
height: 145px;
color: black;
border: 1px solid black;
margin: 5px;
}
#two {
width: 420px;
text-align: center;
padding: 0px;
height: 145px;
color: black;
border: 1px solid black;
margin: 5px;
}
#three {
width: 310px;
text-align: center;
padding: 0px;
height: 295px;
color: black;
border: 1px solid black;
margin: 5px;
display: inline-block;
}
#four {
width: 220px;
text-align: center;
padding: 0px;
height: 295px;
color: black;
border: 1px solid black;
margin: 5px;
display: inline-block;
}
#stackleft, #stackright {
display: inline-block;
vertical-align: top;
}

Answer 2

http://jsfiddle.net/xam558e3/
Using DIV's inside of other DIV's you can easily control how they appear, and where they appear. You should look up the box model, it may shed some light for you on this.
<div style="width:310px">
<div style="width:303px; height: 100px; background-color: #6495ed;"></div>
<div style="width:100px; height: 100px; background-color: red; float:left; margin: 1px;"></div>
<div style="width:100px; height: 100px; background-color: red; float:left; margin: 1px;"></div>
<div style="width:100px; height: 100px; background-color: red; float:left; margin: 1px;"></div>
<div style="width:303px; height: 100px; background-color: red; float:left; margin: 1px;"></div>
</div>