Mise en page en quinconce

Bonjour à tous

Je désire réaliser une mise en page en quinconce, c'est à dire que les blocs de textes s'intercollent sur 2 colonnes.

Un seul problème et de taille, je n'y arrive pas

Pour l'instant j'en suis la : http://malturo.free.fr/mp_8.html

et je souhaiterias obtenir ca : (cf: mp8_ok.png)*


Comment faire ?

Merci d'avance
Modifié par Malturo (05 Sep 2006 - 10:29)

Bonjour Malturo,

Comme souvent, plusieurs solutions existent, à toi de voir celle qui te conviendra le mieux.

À première vue, pour rester simple, je dirais que deux colonnes "enveloppes" en float:left seraient appropriées: la colonne1 contient tes blocs 1, 4 et 6 et la colonne2 les autres blocs.

Tu peux sinon également jouer avec un conteneur global qui enferme l'ensemble des blocs et disposer ces derniers avec des float:left et float:right.

Une solution basée sur l'utilisation de la propriété clear est, je pense, trop délicate dans cet exemple.

À bientôt,



Benjamin.

Merci pour ta réponse Benjamin, en réalité ces solutions conviendraient parfaitement si les blocs étaient de taille fixe.

Le souci c'est que cette organisation doit pouvoir etre modulaire, je m'explique :
Cette hierarchie est évolutive c'est à dire qu'elle peux accueillir de 1 à 10 blocs qui seront, selon leurs contenus, plus ou moins grands.

Il faut donc en réalité que tous les blocs soient dans 1 seule et meme DIV. il se peut par exemple que sur une page le bloc 1 soit plus petit que le bloc 2 ou bien le contraire et ce pour l'ensemble des blocs.

Voila le GROS souci
Modifié par Malturo (05 Sep 2006 - 11:39)

Salut.

Malturo a écrit :
Il faut donc en réalité que tous les blocs soient dans 1 seule et meme DIV. il se peut par exemple que sur une page le bloc 1 soit plus petit que le bloc 2 ou bien le contraire et ce pour l'ensemble des blocs.

Je ne comprends pas en quoi la hauteur variable des différents éléments empêche d'utiliser deux colonnes séparées ?

A partir du moment où tu as créé 2 colonnes, les blocs que tu disposes à l'intérieur vont se superposer, quelle que soit leur taille.

Maintenant, pour respecter la mise en forme "en quinconce" avec des blocs de hauteur variable, ça risque d'être compliqué.

Benjamin D.C. a écrit :
Une solution basée sur l'utilisation de la propriété clear est, je pense, trop délicate dans cet exemple.

A quoi pensais-tu ?

Quelques tests qui pourront t'aider :
http://web.covertprestige.info/test/15-organiser-serie-de-flottants-en-colonnes-1.html

Merci, Oh Gourou

c'est bien ce que j'avais en tete…

Merci à tous d'avoir participer