Mise en page d'un site en 4 colonnes mix fixe/fluide

Bonjour,

Je souhaite créer un site web en 4 colonnes selon le schéma suivant :



Dans les faits, seule la partie blanche (contenant les textes) est amenée à changer. Tout le reste est fixe. Dans le cas où la partie corps (en blanc) serait plus longue, les éléments à droite et à gauche devraient descendre en même temps que le scroll. Enfin, c'est ce que je souhaiterais arriver à faire.

La majeure partie des éléments étant posés, j'aimerais pouvoir adapter ce site à plusieurs résolutions d'écrans. Mais je bloque sur ce problème depuis plusieurs jours.
J'ai lu beaucoup d'astuces, de tutoriels, de posts dans des forums. J'ai essayé les techniques proposées, mais soit ça me fait disparaître les images en background, soit ça ne les positionne plus correctement.
Bref, je sais qu'il n'est pas judicieux d'indiquer les dimensions en pixels, mais pour le moment, c'est le seul truc que j'ai trouvé pour que cela m'affiche les images en questions (les pourcentages me font disparaître les images).

Je viens donc demander un petit coup de main. Voici mon CSS :

@charset "utf-8";
/* CSS Document */

body
{
   width: 100%;
   height: 100%;
   margin: 0px;
}

body img
{
	border:none;
}

#en_tete
{
   width: 400px;
   height: 800px;
   background-image: url(image_tete.jpg);
   float:left;
   vertical-align: bottom;
}

#menu
{
   width: 250px;
   height: 100%;
   background-color: #333333;
   float:left;
}

#corps
{
   width: 560px;
   height: 100%;
   background-color: #FFF;
   float:left;
}

#colonne_droite
{
   width: 212px;
   height:800px;
   background-image: url(photofil3.png);
   float:right;
   vertical-align: bottom;
}

Merci d'avance pour votre aide.

Salut,

J'ai pas trop compris la question, en fait tu voudrais que les autres parties s'adaptent en fonction du contenu de la colonne blanche ?

Si c'est le cas je te propose de mettre tes quatre colonnes en:

display: table-cell;

Et ça devait régler ton problème.

Seulement pour avoir une mise en page qui s'adapte aux différentes résolutions avec ta structures actuelle ce n'est pas chose facile vu qu’apparemment elle prend toute la largeur du navigateur. A moins de passer par les media queries pour en faire une structure plus conventionnelle.
Modifié par Gili (20 Feb 2012 - 22:23)

Bonsoir,

C'est vrai que je n'ai peut-être pas été très explicite, mais si j'ai du mal à expliquer clairement, c'est justement parce que je ne trouve pas de solution.

Dans ma maquette, les parties colorées sont des images (utilisées en background), donc ont forcément un taille déterminée. Je voudrais pouvoir adapter ceci à plusieurs résolutions en partant de 1024x768 comme base.
La partie blanche (qui recevra le texte et qui sera donc le seul élément du site amené à changer à chaque page, tout le reste est fixe en fait et le contenu ne change jamais) peut être fluide et s'adapter plus facilement (bien que je n'ai pas encore trouvé comment). Mais il ne faudrait pas que cela s'étende trop en largeur (pour les très hautes résolutions) car sinon le texte deviendra inconfortable à lire.

Donc ma question est, dans un premier temps, comment rendre adaptable mes quatre colonnes à plusieurs résolutions (en sachant que dès que je joue sur des pourcentages, les images disparaissent).
Ensuite, il faut que j'arrive à disposer les ascenseurs de scroll là où je souhaite, parce que pour le moment, ce n'est vraiment pas le cas. Dans l'idéal, il faudrait un ascenseur vertical complétement à droite (même si en fait il n'intervient que sur la partie en blanc) et un ascenseur horizontal (uniquement si nécessaire en fonction de la résolution de l'utilisateur).

Je n'ai pas opté pour une réalisation en tableau car je n'ai jamais réalisé de sites de cette manière et je pensait qu'il était plus judicieux d'utiliser le positionnement CSS pour le rendu final que j'aimerais.

Tout coup de pouce est donc le bienvenu.
Merci par avance.