Marge fixe et marge variable...

Tout d'abord, bonjour à tous.

J'ai de petits soucis (et maintenant quelques cheveux en moins) avec une mise en page capricieuse.
Voici un lien vers une page test.
J'y ai joins deux CSS: l'une pour le style, l'autre pour l'agencement des zones.
Chaque zone colorée (de façon fort harmonieuse, vous en conviendrez) représente un div judicieusement nommé ( id="zoneDroite" à droite...).
Mon problème est le suivant:
Je voudrais que les zones verte et grise (respectivement zoneDroite et zoneGauche), soient de taille fixe (100px) et que la zone rouge (zoneCentre)remplisse l'écart entre les deux (quelque soit la taille de la fenetre).
Bien évidement, ça ne s'arr^te pas là (ce serait trop facile), j'aimerai que les zones bleu et orange (les deux en bas, zoneBas et actions) restent en bas, quelque soit la longueur des trois zones verte, rouge et grise...

En plaçant les div verte et grise dans le div rouge, c'est aisé d'y parvenir (même pour moi...), seulement, j'aimerai qu'elles restent en dehors, que chaque zone reste frère (soeur en l'occurence).

J'espère avoir été clair... N'hésitez pas à me demander quelques précisions si nécéssaire, au cas l'un d'entre vous daigne gracieusement m'accorder un peu de son temps.
Merci d'avance...

Andy Budd utilise un div supplémenaire (pdf) pour cet exemple :

<div id="conteneur_principal">
    <div id="barre_laterale">
    ...
    </div>
    <div id="contenu_principal">
    ...
    </div>
</div>
<div id="contenu_secondaire">
...
</div>

Ca marche par couple : tu en fais flotter un à gauche et un à droite.

Je te conseille evidemment de lire le chapitre entier sur les mises en page fluides et/ou elastiques.

DirtyF a écrit :
Andy Budd utilise un div supplémenaire (pdf) pour cet exemple :

<div id="conteneur_principal">
    <div id="barre_laterale">
    ...
    </div>
    <div id="contenu_principal">
    ...
    </div>
</div>
<div id="contenu_secondaire">
...
</div>

Ca marche par couple : tu en fais flotter un à gauche et un à droite.

Je te conseille evidemment de lire le chapitre entier sur les mises en page fluides et/ou elastiques.

Ce PDF est assez complet. En jouant avec les propriétés clear, on peut arrivée à une solution bien pres de ce que tu recherches, mais il y a toujours des défaults. Je te conseille de faire un faux-background en trois colonne, comme il est indiqué dans le PDF. C'est ce qu'il nous enseigne à l'école pour faire des séparation en trois colonnes.

Ou bien, rendre la colonne du centre et celle de droite dans un conteneur.

Merci pour cette doc très riche en conseils!!!

Oui effectivement, il semble qu'il soit nécéssaire de rajouter un div conteneur...
C'était malheureusement ce que je voulais éviter...
Mais après mûr réflexion, je crois que je vais suivre vos conseils avisés.
Mais j'hésite à rassembler les 3 parties dans un seul div (avec un float left et floa right, et le dernier sans rien) ou à le faire comme indiqué dans la doc :
une colonne seule et les deux autres regroupé dans un div...

Quand au faux background, je préfère m'en passer. La colone du milieu doit être la seule flexible... Mais merci pour le tuyau, ça m'a donné une idée pour une autre partie de mon projet!

Merci à vous deux!!!

Hmmm... Euh... C'est encore moi...
J'ai fini par regrouper les trois zones du milieu dans le div... tadaa: "milieu"...Hm, pardon...
Tout ça pour dire que maintenant, tout fonctionne... sur IE.
Mais sur Firefox, une marge d'une centaine de pixels apparait sur la gauche, faisant apparaitre une disgracieuse scrollbar horizontal en plein écran (19')!
D'ailleurs, elle est toujours présente, quelque soit la taille de la fenetre, même quand le contenu se redimensionne, sans que rien ne sorte sur le coté de la page!!!
Est-ce un bug? une erreur de ma part? Y-t-il une solution? Ou au moins une hypothese?
page
CSS
Modifié par gandulf (18 May 2006 - 08:50)

Bin écoute, chez moi sur Firefox ça ne foire pas ... Ca s'affiche normalement !

chez moi IE et FF affiche la même chose