Page (divs) : menu à gauche fixe + un contenu variable de largeur max

Bonjour tout le monde,

j'ai trouvé une bonne solution pour se passer des tableaux et faire une page avec menu gauche fixe (disons 200px) et un contenu à droite de ce menu qui prends le maximum de largeur (comportement de tableau).

page exemple :

http://dev.pga-mkg.lnet.fr/site/sample.html

et je vous laisse le plaisir de regarder dans ma feuille de style comment j'ai fait. C'est très simple (peut être trop d'ailleurs).

je vous explique un petit peut quand même :

je mets mon menu gauche en position absolute (et j'ai "left:0;" car ma page est en largeur 100%) et je lui ai fixé donc la fameuse largeur de 200px.

ensuite mon div contenu qui doit donc prendre 100% de toute la page sans tenir compte du menu gauche (à cause du absolute). Je lui mets un margin-left de... 200px!! comme ça mes 2 divs de se superposent pas.

Voilà une solution très simple pour palier ce problèmes qu'on a pas avec les tableaux.

Il y en aura des puristes qui diront que c'est pas bien de placer les éléments en absolute. Mais comme je mets le div conteneur en position relative, celui qui est en absolute se place donc relativement au div conteneur : donc ce n'est pas un vrai absolute.

J'attends vos commentaires et toutes vos remarques et questions sont les bienvenues.

Merci, à+.
Modifié par youssef11420 (12 Jun 2006 - 17:43)

youssef11420 a écrit :
Il y en aura des puristes qui diront que c'est pas bien de placer les éléments en absolute. Mais comme je mets le div conteneur en position relative, celui qui est en absolute se place donc relativement au div conteneur : donc ce n'est pas un vrai absolute.

Si si c'est un vrai positionnement absolu, dont le référent est son bloc parent positionné en relatif, et pas html. Mais ça reste du positionnement absolu.

Le positionnement absolu n'est pas mauvais en soi. C'est juste un outil puissant, aux effets radicaux. Mieux vaut donc savoir ce que l'on fait en l'utilisant. Mais là ça a l'air d'être le cas.

Au fait, le conteneur positionné en relatif (pour servir de référent) doit être doté de layout dans IE Win, si on veut que le positionnement absolu dans ce référent fonctionne correctement avec ce navigateur. Cf :
http://web.covertprestige.info/test/12-positionnement-absolu-selon-conteneur.html

Sinon, cette technique toute simple de la marge à gauche (ou à droite, suivant le besoin) pour un bloc de contenu fluide, on la trouve aussi dans certains gabarits des tutoriels d'alsacréations, ou bien ici, avec trois colonnes (deux flottantes et le bloc de contenu central en flux) :
http://web.covertprestige.info/test/11-page-fluide-avec-trois-colonnes-1.html

L'avantage des flottants, c'est surtout dans les cas où l'on voudrait placer du contenu en dessous du menu, par exemple un pied de page. Avec un menu en positionnement absolu, ça risque d'être difficilement gérable. Avec un flottant, c'est tout de même plus simple..