Allineare 5 div

[atsap]

Salve a tutti

Ho questo problema: ho un div #container globale che contiene al suo interno altri 5 div che vorrei organizzare come nell'immagine allegata.
Io uso questo codice:

#container {

	min-height: 850px;
	width:1000px;
	margin: auto;
	padding: 10px;
	background: white;
	border:#E9E9E9 solid 1px;
}

.bloccoInf1, .bloccoInf2, .bloccoInf3 {
min-height: 200px;
margin-top:5px;
font-family:Verdana, Arial, Helvetica, sans-serif;
padding:10px;
text-align:justify;

}

.bloccoInf1 {

border: 1px solid #CCCCCC;
width: 20%;
margin: auto;
margin-left: 10px;

}

.bloccoInf2 {
background:white;
color: white;
width: 50%;
margin-left: 10px;

}

.bloccoInf3{
width: 20%;
margin-left: 10px;
color: #0000FF;
margin-left: 10px;
background: white;
}

.bloccoInf4{
width: 20%;
margin-left: 10px;
color: #0000FF;
background: green;
}

.bloccoInf5{
width: 20%;
margin-left: 10px;
color: #0000FF;
background: black;
}

Cosa succede in questo modo? Semplice: i blocchi 4 e 5 non vengono subito sotto i blocchi 1 e 3, ma correttamente allineati soltanto DOPO la fine del blocco 2, e a me non sta bene.
Aggiungo che con I.E. 7 i blocchi 4 e 5 si vedono allineati verticalmente sotto il blocco numero 3 mentre con FF e Chrome no, appaiono come già detto soltanto dopo la "fine" del blocco centrale 2.
Any idea?

Grazie!

[bionicoz]

Io suddividerei i tre colonne, così:

#container{background-color:cyan;}

#container div{float:left; height:auto;}

#left,#right{width:25%}
#middle{width:50%}

#container div div{width:100%; height:100px; margin-bottom:10px;}

#uno{background-color:maroon}
#due{height:200px !important; background-color:green;}
#tre{background-color:red;}
#quattro{background-color:yellow;}
#cinque{background-color:navy;}

.push{clear:both;}

<div id="container">

<div id="left">
    <div id="uno">1</div>
    <div id="tre">3</div>
</div>
    
<div id="middle">
   <div id="due">2</div>
</div>
    
<div id="right">
    <div id="quattro">4</div>
   <div id="cinque">5</div>
</div>
<br class="push" />
</div>

ciao, bio.

[atsap]

Grazie, è un passo avanti, ma...

ho questo problema. Guarda l'immagine! In pratica, nel box centrale, il contenuto "overflowa", non saprei come definirmi meglio
Come mai?
Grazie mille per la risposta!

[atsap]

Non edito perché ho risolto da solo:

nel div centrale, prima della proprietà !important invece di 200px, è bastato settare come altezza "auto", e ora segue il corretto layout. Grazie, risolto!!!