28172 sujets

CSS et mise en forme, CSS3

Bonjour

Afin de faire un joli site responsive, je souhaite re-positionner des div selon la largeur de l'écran.
Lorsque l'écran à une largeur supérieur à 600px, je souhaite afficher en 3 colonnes mes blocs, de la manière suivante :

Bloc A Bloc B Bloc C
Bloc D Bloc E Bloc F

Lorsque la largeur de l'écran est inférieur à 600 px je souhaite afficher mes blocs sur une seule colonne et également changer l'ordre de ces blocs, de la manière suivante :

Bloc C
Bloc F
Bloc A
etc...

Pour celà j'affecte l'attribut position : absolute; et je fixe un top : XXXpx ou un bottom XXXpx lorsque la largeur est inférieur à 600px. Mais j'ai donc un gros problème dans l'alignement de mes blocs puisque certains de mes blocs ont du texte dont la longueur peut varier.

Dans l'exemple ci dessus si le bloc F a beaucoup de texte, le bloc A et F vont se superposer.

Quelqu'un aurait une solution ?
D'avance merci !
salut,
pour faire ce que tu souhaites tu peux passer par "display:box". Ce n'est pas implémenté sur tous les navigateurs (notemment IE9).

EDIT: grillé...
Modifié par Zelalsan (14 Oct 2014 - 17:22)