organiser des div en float sans perdre d'espace

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par yann214, 17 Octobre 2011.

  1. yann214
    yann214 WRInaute occasionnel
    Inscrit:
    17 Novembre 2005
    Messages:
    371
    J'aime reçus:
    0
    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.

    [​IMG]

    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>
     
  2. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 024
    J'aime reçus:
    291
  3. yann214
    yann214 WRInaute occasionnel
    Inscrit:
    17 Novembre 2005
    Messages:
    371
    J'aime reçus:
    0
    ç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 ?
     
  4. SpeedAirMan
    SpeedAirMan WRInaute passionné
    Inscrit:
    2 Juin 2007
    Messages:
    2 391
    J'aime reçus:
    0
    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.
     
  5. yann214
    yann214 WRInaute occasionnel
    Inscrit:
    17 Novembre 2005
    Messages:
    371
    J'aime reçus:
    0
    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
     
  6. MarvinLeRouge
    MarvinLeRouge WRInaute impliqué
    Inscrit:
    1 Septembre 2004
    Messages:
    515
    J'aime reçus:
    0
    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.
     
  7. nervusdm
    nervusdm WRInaute impliqué
    Inscrit:
    5 Janvier 2008
    Messages:
    616
    J'aime reçus:
    0
    Merci spout, je ne connaissais pas du tout ce script jquery. C'est vraiment excellent, dans l'optique par exemple de visonneuses d'images
     
Chargement...
Similar Threads - organiser div float Forum Date
Organiser ses infos entre H2 et H3 Rédaction web et référencement 21 Juin 2020
Organiser un concours sans règlement ? Droit du web (juridique, fiscalité...) 16 Janvier 2015
Organiser un concours sur twitter Twitter 31 Octobre 2014
Faut-il payer sur facebook pour organiser un concours sur sa page de fans ? Facebook 2 Avril 2013
Organiser une loterie/tombola en ligne, ou comment rendre son site Internet privé Droit du web (juridique, fiscalité...) 25 Mars 2013
Organiser l'accueil de mon wordpress Administration d'un site Web 8 Mars 2012
Comment organiser les articles du site Débuter en référencement 28 Décembre 2011
Préparer et Organiser ses vacances Demandes d'avis et de conseils sur vos sites 9 Septembre 2011
Une idée pour réorganiser ma longue liste de liens ? Problèmes de référencement spécifiques à vos sites 23 Août 2011
Comment organiser un transfert dans le cadre d'une cession de ndd? Noms de domaine et référencement 12 Décembre 2010
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice