Bonjour à tous.

Comme vous pouvez vous en douter, j'ai un problème de mise en page.

J'ai un site au design extensible et je voudrais afficher des photos en miniature dans des carrées (ce n'est pas très simple à expliquer). Ces carrés sont des divs avec alignement à gauche.

Le problème est que le corp dans lequel sont situèes ces carrés de photos ne s'allonge pas. Un exemple sera surment plus clair.



le corp est représenté par le cadre rouge.

Et voici ce qu'il se passe lorsque l'on réduit la fenêtre:



Vous pouvez voir que le corp n'est pas du tout à sa place.





Cela fait un moment que je suis en train de chercher et donc si vous avez une idée...

Merci d'avance

Déjà mets des class pour les bloc_photo à la place des id

Ensuite tu devrais mettre une largeur en pourcentage pour tes bloc_photo de 31.5% (vu qu'il y en a 3 et qu'il y a une bordure pour chacun). Et il faut que tu définisses une hauteur à ton corps.

Pour les class jamais essayè mais cela n'avait rien changer.
Et justement je ne voulais pas mettre les blocs en pourcentage puisque la taille des photos sera fixe et il y aura plus de bloc ensuite donc je veux qu'il y en est un maximum sur la page. La taille du corp s'adaptera (en théorie)

Bonjour,

Je ne suis pas sûr de ce que je vais te dire, mais si au lieu de mettre
une largeur de 200px à tes blocs pour tes 3 photos, tu mettais plutot une
largeur en %, 33% pour les 3 pour couvrir toute la largeur. Ca pourrait peut-être fonctionner?

Parce que lorsque tu mets 200 px pour chaque image, lorsque la fenêtre se réduit de trop, la troisième n'a plus assez de place et ça me parait logique qu'elle passe en-dessous non?

EDIT: oups grilled! Julfisher a raison, 31,5% c'est mieux

bah c'est normail vu qui sont en float.
rajoute au dessous de ces carrées :

C'est justement le but que les photos passent en dessous. Le problème c'est le corp qui ne suit pas.



Ce code fonctionne bien sauf lorsque la fenètre est réduite et qu'un bloc passe dessous. Dans ce cas le corp n'encadre que le bloc qui est passé en dessous.