organiser des div en float sans perdre d'espace

WRInaute occasionnel
Bonjour,

Je souhaite placer côte à côte des div en float pour occuper au maximum l'espace de la page.
Ainsi ces blocs seront présentés en une colonne s'il y a peu de place, 2 colonne s'il y en a plus, etc.
Elles viennent donc s'empiler les unes derrière les autres grâce à la propriété float:left
A noter que ces blocs ont des hauteur différentes

Le problème que j'ai, c'est que dès qu'un élément doit revenir à la ligne parce qu'il n'y a plus de place, il cale sa hauteur sur le dernier élément placé, et non sur le dernier élément placé à droite.
Je perds donc de la place.

Voici un petit schéma de ce qui se passe et de ce que je voudrais.

test_css.gif


A savoir que je veux toujours placer les div dans l'ordre de numérotation, afin d'avoir les éléments important toujours en haut de page.

Existe-t-il une solution css ?
avec des overflow peut être ?

Merci ;)

Pour info voici mon code actuel pour cette présentation :
Code:
<!DOCTYPE html lang="fr">
<head>
<style type="text/css">
<!--
.bloc_info {
	background-color: gray;
	border: solid 1px black;
	float: left;
	width: 46%;
	min-width: 256px;
	max-width: 512px;
	margin-left: 1%;
	margin-right: 1%;
	margin-top: 5px;
	padding : 5px;
}

-->
</style>
</head>
<body>
	<div class="bloc_info">1.<br />aaaaaaaaaaaaa<br />aaaaaaaaaaaaa<br />aaaaaaaaaaaaa<br />aaaaaaaaaaaaa<br />aaaaaaaaaaaaa<br />aaaaaaaaaaaaa<br />aaaaaaaaaaaaa<br />aaaaaaaaaaaaa<br /></div>
	<div class="bloc_info">2.<br />aaaaaaaaaaaaa<br />aaaaaaaaaaaaa<br />aaaaaaaaaaaaa<br />aaaaaaaaaaaaa<br /></div>
	<div class="bloc_info">3.<br />aaaaaaaaaaaaa<br /></div>
	<div class="bloc_info">4.<br />aaaaaaaaaaaaa<br />aaaaaaaaaaaaa<br />aaaaaaaaaaaaa<br />aaaaaaaaaaaaa<br />aaaaaaaaaaaaa<br />aaaaaaaaaaaaa<br /></div>
	<div class="bloc_info">5.<br />aaaaaaaaaaaaa<br />aaaaaaaaaaaaa<br />aaaaaaaaaaaaa<br /></div>
	<div class="bloc_info">6.<br />aaaaaaaaaaaaa<br />aaaaaaaaaaaaa<br />aaaaaaaaaaaaa<br />aaaaaaaaaaaaa<br />aaaaaaaaaaaaa<br />aaaaaaaaaaaaa<br />aaaaaaaaaaaaa<br />aaaaaaaaaaaaa<br />aaaaaaaaaaaaa<br />aaaaaaaaaaaaa<br /></div>
	<div class="bloc_info">7.<br />aaaaaaaaaaaaa<br />aaaaaaaaaaaaa<br /></div>
</body>
</html>
 
WRInaute occasionnel
ça a l'air vraiment pas mal !
Merci beaucoup !
cela signifie-t-il qu'il n'existe pas de solution simple à ce problème via CSS ?
 
WRInaute passionné
cela signifie-t-il qu'il n'existe pas de solution simple à ce problème via CSS ?
Je vois qu'il y'a 2 colonnes.

Tu fais donc 2 colonnes, et tu places les blocs les uns sous les autres - il n'y aura pas de décalage, mais il faudra modifier l'ordre des blocs dans le HTML.
 
WRInaute occasionnel
justement je ne sais pas combien il y aura de colonnes...
Ça dépend de la taille du navigateur.

Je veux juste que les div s'empilent mais en ne laissant pas de vide entre elles et en se mettant le plus près du haut possible.

A savoir qu'elles ont toutes la même largeur, ce qui fait qu'elles peuvent facilement se glisser dans ces espaces libres
 
WRInaute impliqué
Salut,

Il y a bien le multi column layout en css, en changeant le nombre de colonnes suivant la largeur disponible, mais ça ne marche pas sous IE, il me semble.
 
WRInaute impliqué
Merci spout, je ne connaissais pas du tout ce script jquery. C'est vraiment excellent, dans l'optique par exemple de visonneuses d'images
 
Discussions similaires
Haut