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.
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 :
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.
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>
