28172 sujets

CSS et mise en forme, CSS3

Bonjour tout le monde,

Je rencontre actuellement un petit souci pour aligner des div. Habituellement je travaille avec des largeurs fixes et cela ne me pose pas de problème. mais là je dois travailler aves des largeurs relatives et j'ai beaucoup de mal à aligner le tout.

Pour résumer j'ai un bloc container qui contient deux blocs, gauche et droite, celui de gauche et fixe (200px) celui de droite et relatif avec à l'intérieur 3 div qui s'imbriquent les uns sur les autres.

exemple : -http://www.auto-evasion.com/forums/zz.php

J'aimerais que les trois div de droite puissent automatiquement remplir le bloc de droite, mais après plusieurs essais il y a rien à faire le bloc passe dessous le bloc gauche.

Si quelqu'un avec une astuce ou un règle pour régler ce genre de problème, je suis preneur ...

Merci beaucoup

Erwann
Moutyk a écrit :
J'aimerais que les trois div de droite puissent automatiquement remplir le bloc de droite

Dans un premier temps, supprimer tous les float:left et width:590px sur ces blocs. Un élément de type bloc prend tout seul toute la largeur de son conteneur, donc pas la peine d'utiliser une largeur fixe. Et si le but est de placer ces trois blocs les uns en dessous des autres, les faire flotter est juste, comment dire... complètement illogique.

À ce stade, tu devrais pouvoir diminuer ou agrandir la largeur de div#droite, et les trois DIV enfants devraient suivre automatiquement.

Ensuite, tu peux supprimer la largeur fixe de div#droite. Et supprimer le float:left qui t'embête plus qu'autre chose. En lisant ce tutoriel, tu verras que pour placer deux blocs côte-à-côte il suffit d'un seul flottant. Rajoute un margin-left:200px, et l'affaire est dans le sac.

Tu peux maintenant changer la largeur du conteneur (div#message), et la colonne de gauche restera fixe tandis que celle de droite s'adaptera.

Les problèmes restant à corriger:
1. Tu utilises plusieurs fois le même identifiant dans la page. Ce n'est pas valide. Il faut utiliser des classes, qui sont justement faites pour ça.
2. Il te faudrait un conteneur unique pour chaque message (.message), et non pas deux conteneurs (#message et #message2). Il faudra adapter le code de ce qui est aujourd'hui #message2 pour que sa largeur dépende de la largeur du nouveau conteneur (.message).