[résolu]Gabarit fluide , débordement de contenu à l'horizontal

Salut à tous,

Je dois faire un site fluide (donc extensible horizontalement et verticalement) avec 3 colonnes, comprenant le système des fausses colonnes (que la taille des colonnes soit toujours égale (visuellement) quelque soit celle "qui pousse").
C'est pour une application, tout doit être fait sans tableaux pour pouvoir utiliser une sorte de style switcher et pouvoir changer les éléments de place, leurs background etc...

Pour le moment mon problème se pose sur l'extensibilité à l'horizontal du gabarit.
Je suis parti de cet exemple pour tester et essayer de reproduire un comportement bizarre observé sur le gabarit que j'étais en train de construire (...j'ai réussi).

Dans cette application, dans ma colonne centrale j'aurai d'affiché sur certaines pages un tableau énorme en largeur (14 colonnes), si j'y additionne les propres marges internes de son conteneur, celles du body et la valeur des colonnes latérales, on dépace largement les 1024px de largeur.

C'est là qu'est le problème, je pensais que dans ce cas, en 1024px de résolution, la colonne centrale pousserai celle de droite pour élargir le site horizontalement, hors le contenu en question (mon fameux tableau) sort de la colonne centrale qui ne s'étend pas.
Par contre la fenêtre du navigateur choppe un scroll horizontal et mon tableau est visible mais le graphisme ne suis pas.

J'ai fait des copies d'écran des tests que j'ai fait en insérrant un mot très grand dans la colonne du milieu sur le gabarit d'exemple d'alsa.

Un screen de la même page en 1280x1024, puis 1024x768.
[img=http://img507.imageshack.us/img507/2053/3colonnesox1.th.gif]

Un screen avec un contenu très long dans la colonne centrale :
[img=http://img340.imageshack.us/img340/4947/3colonnes2ux6.th.gif]

C'est comme si le site s'adaptait à l'écran, et non par rapport au contenu.

Est ce un comportement normal ? ça en à l'air...
On doit visiblement choisir sa résolution ciblé et y adapter son contenu ?
Modifié par Hum (13 Oct 2007 - 22:25)

Salut,

Je pense qu'une page en ligne aiderait mieux à se rendre compte ce qui cause ce problème. Ou a défaut, l'intégralité du code CSS et html.

En tout cas, ça n'est pas un bug mais bien un comportement normal.
Essaie de faire la même chose dans une page vide avec un div en width: auto, tu verras (en lui mettant un background par exemple) qu'il ne s'élargira pas pour contenir les éléments qui dépassent. C'est une caractéristique de l'affichage de type bloc.

Les éléments en affichage de type "table" ou "table-cell" s'élargissent pour contenir les éléments qui dépassent, par contre.

Florent V. a écrit :
En tout cas, ça n'est pas un bug mais bien un comportement normal.

C'est bien ce que je pensais même si je l'avoue ce comportement m'a surpri.

Voilà une page en ligne, c'est juste un très large contenu insséré dans le gabarit de page d'exemple d'alsa
Modifié par Hum (03 Oct 2007 - 15:10)

Il me semble qu'il n'y a pas trente-six mille solutions:
- soit tu évites d'avoir un contenu trop large (pour un maousse tableau: il aurait peut-être sa place dans une page dédiée avec juste le tableau et un lien de retour?);
- soit tu prévoies une déformation en fonction du contenu, et en gros il faut utiliser display: table-cell pour les trois colonnes, et pour la compatibilité avec IE ça impose d'utiliser un tableau de mise en forme (ce qui n'est pas exclu, bien sûr).

Edit: tu peux aussi placer le tableau dans une div en width: 100%; overflow: auto;, mais ça risque de ne pas être très pratique à consulter.
Modifié par Florent V. (03 Oct 2007 - 15:44)

Merci de ta réponse Florent.