Positionnement float:left toujours en haut même après une ligne.

Bonjour à tous,

J'ai une colle en css qui traine depuis un petit paquet de temps sur laquelle je viens de revenir.

Je m'explique :
Dans une div j'ai plusieurs bloc dont le nombre, la taille et l'ordre est généré par le site donc amené à être toujours différents. Je souhaiterais que ces derniers soit positionnés en ligne mais toujours strictement le plus haut possible, en laissant le moins de place possible, et une sensation d'imbrication maximum.

L'argument CSS float:left; me semblait correspondre parfaitement, mais celui ci ne remonte pas les blocs plus haut que le bas du plus gros bloc de la ligne de dessus.

Voici donc un exemple pour être un peu plus clair :

<div>
	<div class="Box1"></div>
	<div class="Box2"></div>
    <div class="Box3"></div>
	<div class="Box4"></div>
</div>

div {
	border:0px;
	margin:0px;
}
div div {
	display:inline-block;
	position:relative;
	float:left;
}
div .Box1 {
	background-color:#FF0;
	width:40%;
	height:20px;
}
div .Box2 {
	background-color:#0F0;
	width:40%;
	height:10px;
	position:relative;
}
div .Box3 {
	background-color:#F00;
	width:50%;
	height:30px;
	position:relative;
}
div .Box4 {
	background-color:#00F;
	width:20%;
	height:30px;
	position:relative;
}

Il y a ici un gros espace verticale entre la div jaune et la bleu. J'aimerais dans mon cas réussir à faire grimper la div bleu verticalement contre la div jaune, ainsi que les suivantes tant qu'il y en a la place.

Après avoir exploré internet et essayé toutes sortes de balises ou d'arguments css, je crois que ce n'est pas techniquement faisable en HTML/CSS...

A court d'argument, je vous pose donc ma colle ici. Est ce donc possible?

Merci.

tayK a écrit :

En fait le positionnement du div rouge n'est pas celui qui me pose le problème, mais surtout le bleu qui ne va pas se coller en haut. J'aimerais vraiment qu'ils s'imbriquent tous au maximum en hauteur.

Là, je crois qu'il y a un problème... car le bleu est positionné après le rouge dans le HTML. Si le rouge ne peut aller en haut car il est trop large... je ne crois pas que le bloc qui suit puisse y aller automatiquement... juste parce qu'il y a la place.

On peut forcer les éléments à se mettre dans un ordre différent avec Flexbox et la propriété order mais le bloc rouge ne va pas se coller nécessairement au bloc jaune... et ce n'est pas automatique.

La seule chose qui ressemble à ce que vous voulez est le positionnement automatique avec GridLayout mais celui-ci n'est pas encore d'actualité.