Placement de DIV avec différents tailles

Hello à tous,

Voila, je débute en CSS et j'ai un petit soucis de mise en page dans le contenu d'une page.
Je souhaite, placer des DIV de différentes tailles les uns en dessous des autres mais le problème est qu'apparemment la taille compte ! (je sais, elle était facile celle la.. ^_^)
2 images pour illustrer :

Je voudrais faire cette disposition :


Le problème est qu'avec mon CSS je me retrouve avec ça :


En fait, le bloc orange se trouve automatiquement décalé de la taille en hauteur du bloc bleu... (oula, faut suivre là..)

Voila mon code (je sais, je débute )

div#bloc_rouge {
	float:left;
	width:200px;
	height:180px;
	background-color:#FFF;
	
	}
div#bloc_vert {
	text-align:left;
	float:left;
	width:400px;
	height:180px;
	background-color:#FFF;
	}

div#bloc_bleu {
	float:left;
	width:320px;
	height:500px;
	background-color:#FFF;
}
	
div#bloc_orange {
	float:left;
	width:600px;
	height:200px;
	background-color:#FFF;
}

div#bloc_rose{
	width:600px;
	height:150px;
	background-color:#FFF;
}

Ça serait sympa si quelqu'un pouvait m'éclairer un peu...

Merci

http://masonry.desandro.com/

jQuery Masonry c'est vraiment pas bon.

Ou plutôt c'est une démonstration sympathique mais c'est clairement pas un truc à utiliser en production sur un vrai site du moment qu'on a du texte dans les blocs, tout simplement parce que ce script fonctionne en plaçant tous les éléments en absolu et que dès qu'on redimensionne un peu le texte les contenus se chevauchent dans tous les sens.

Donc:

1. Si la structure est prédictible, on évitera d'utiliser un script de ce genre et on utilisera du positionnement CSS plus classique (float, ou encore du display:table ou display:inline-block). En l'occurrence si la structure montrée dans ces images restera toujours la même, on peut commencer par faire deux colonnes: une pour le bloc bleu à droite, et une autre pour tous les autres blocs à gauche.

2. Si la structure n'est pas du tout prédictible, qu'on réalise une sorte de galerie d'images avec des éléments aléatoires ou évolutifs de formats différents à disposer élégamment, là un script tel que jQuery Masonry devient intéressant et on tolèrera ses défauts...

Tout d'abord, merci à vous deux, jmlapam pour ton script que je vais garder au chaud, ça peut toujours servir et à toi fvsch pour ton explication (oui le contenu est prédictible, il ne changera pas)

Je voudrais juste en savoir un peu plus :
Si je comprends bien, pour faire ce que je veux, je dois faire 2 colonnes avec les contenus (1 colonne pour les blocs rouge, vert, orange et rose, avec des float) et une 1 colonne avec le bloc bleu..)

Sinon, juste pour ma culture, nativement c'est possible de faire ce que je veux directement ou il faut forcément passer par "DIV" différents ?
Pas besoin de me donner une explication super longue, c'est juste pour savoir


Merci encore !