Bonjour à tous
 
Je suis à la recherche d'une solution élégante pour obtenir un style tout simple sur un site :  
 

 
J'utilise bien entendu des DIVs pour tout cela, mais j'ai un souci :
 
Option n°1 : J'utilise un float:left pour ma div menu et ma div content, suivi d'un clear:both qui me permet d'affiche ma bottom banner:
Je me retrouve alors dans ce cas de figure :  

C'est-à-dire que la largeur de la div content est directement dépendante de son contenu.  
 
Deux solutions pour remédier à ce problème en gardant les floats :  
1. Mettre dans le content une <hr> invisible ou autre élément, dont la largeur correspond à la largeur minimum souhaitée de cette div (bourrin!)
2. Donner une  "width" à ma div content. Que je définisse cette largeur en valeur fixe (px) ou en pourcentages, le problème est que si l'utilisateur a une fenêtre de navigateur plus petite et/ou qu'il redimensionne celle qu'il utilise, la div content va très vite se retrouver au-dessous de la div menu...  

Aucune de ces solutions ne me plaît dans ce cas de figure.
 
 
Option n°2 : Utiliser un float uniquement pour le menu, et augmenter la margin-left de mon content en conséquence :  

Cette solution donne le résultat que je veux (la largeur de la div content fait bien tout l'écran), mais je n'en suis pas encore totalement satisfait.  
 
En effet, il me semble que les DIVs doivent être des entités séparées, que je décide d'accommoder comme il me semble les unes par rapport aux autres. Or, ici la "margin-left" du content est directement dépendante de la largeur (fixe, celle-là) du menu.
Si je décide de changer cette valeur, par exemple avec un menu moins large, ou même de mettre le menu sur la droite et plus sur la gauche, il faut que je retouche la valeur de cette margin, qui n'est normalement pas concernée puisqu'elle ne fait pas partie du menu ...
 
Ma question est donc : quelqu'un aurait-il/elle une solution plus propre encore pour obtenir un layout comme je le désire  (c'est-à-dire comme la première des "citations" ci-dessus) : menu à largeur fixe, et largeur du content qui fait tout le reste de la fenêtre mais qui peut être variable  ?
 
Merci d'avance pour tout indice,

tu peux éventuellement utiliser un tableau. Sinon il y a les frames

Salut et merci pour ta réponse ...
 
Je ne veux pas relancer l'éternel débat divs vs tables, mais je suis clairement un partisan du premier camp, à savoir les divs. Je ne suis pas archi-anti-tables non plus, quand il s'agit d'afficher des données ... mais pour de la mise en pages, les tables ne sont pas faites pour ça à la base c'est mon opînion et je la partage
 
Quant aux frames, on est au XXIème siècle hein

Dans ton deuxième exemple, ton margin est inutile

Edit : Sinon t'as des layouts tous prêts sur alsacreations

Non. En fait si tu ne mets pas ce margin tu vas avoir ce genre de situation à mesure que le contenu de "content" augmente :

- ce que je ne veux pas.  
 
Mettre un margin permet d'avoir ce genre de situation qui est préférable :

, où les tildes (~) représentent du vide et non pas un "overlap" de la div content au-dessous du menu, ce qui n'est pas très joli-joli ...  
 
 

Merci, j'irai jeter un oeil ... Mais je voudrais surtout mieux comprendre les CSS et savoir comment, au niveau du code, je peux obtenir le résultat que je veux, mais sans passer par la voie détournée que j'ai trouvée ici et qui ne me semble pas la plus heureuse ...

tente un float:right; pour ton content, en plus du float:left; de ton menu, et si je peux me permettre un conseil, pour éviter des surprises désagréables avec ton bottom banner, englobe menu et content dans un div corps, main, nomme le comme tu voudras.

Bonne idée pour la div "main"
 
En revanche, le problème persiste pour le reste ... si on met un float:right et un float:left en même temps, le deuxième "écrase" le premier et le browser ne considère donc que celui-là.
 
 

moi je rusais en foutant deux float left: a condition qu'il y ai la palce de foutre les deux cote a cote, les deux div vont être collé l'un contre l'autre vers la gauche (normal) mais celui le plus a droite n'emmerde pas celui qui se trouve sur sa gauche... et ça marche plutot pas mal

+1

Si tu parles de mettre le menu et le content tous les deux en float:left , il s'agit de l'"Option n°1" dans mon premier topic ci-dessus... qui n'est pas bien car la largeur de la DIV est dépendante de son contenu ...

Pas en utilisant le contexte de formatage (genre : overflow:hidden; _overflow:visible; zoom:1) et bien sur tu applique une marge de droite (margin-right) de 10px sur l'élément flotté à gauche et rulez \o/

Cool merci pour le tuyau ..

Je suis allé voir la doc sur l'overflow  (W3.org et W3Schools.com) mais je ne vois pas comment cela peut remplir le même effet qu'avec ma margin-left de la div content .

De plus , je ne comprends pas ce qu'est la propriété qui commence par un Underscore ("_overflow" )... La seule info que je trouve ce sont les Vendor-specific extensions mais je ne vois pas le domaine d'application ici ...

J'ai un layout comme ça sur une appli, j'utilise le float également, et j'ai simplement mis une marge sur le contenu principal :

 
Hehe merci pour ta réponse mais tu n'as pas dû bien lire le topic car c'est exactement ce que je fais ("option numéro 2" dans le tout premier message), et que je voudrais éviter

As-tu testé ?
 
En établissant un nouveau contexte de formatage, le bord de ton contenu ne va plus être considéré comme le bord de la page, mais va débuter après ton flottant. Tu devrais donc avoir l'effet que tu souhaites.
 

Dans l'exemple de gatsu, je suppose que le _overflow est un hack à l'usage de IE6, l'overflow ne créant pas un nouveau contexte de formatage sur ce dernier. Par contre, sur IE; un nouveau contexte de formatage est établi lorsqu'on dote un élément du layout, ce que permet de faire l'utilisation de la propriété zoom sur les version d'IE à partir de la 5.5 (sauf erreur).
 
Perso je préfère réserver l'utlilisation de la propriété microsoft zoom à des tests de débugage et utiliser des hack qui permette à la feuille de style de passer la validation du genre le holly hack pour donner le layout:
 

Quand je disais que je voyais pas comment ça peut remplir le même effet, je voulais impliquer que malheureusement je ne vois pas comment le mettre en place...

Je lis le lien que tu m'indiques ici et vas voir quoi

Merci, j'en prends bonne note

Tu prends ton code de l'option2, tu vire le margin-left de 200 et, à la place, tu mets un overflow:hidden. Là, tu regardes le résultat, tu fais quelqes tests sur les différents navigateurs et tu comprendras pourquoi Gatsu te propose de mettre le margin pour séparer les 2 éléments au menu et non au content
 
En passant, tu devrais renseigner un doctype valide en haut de ta page, que les navigateurs passent en mode standard.

Flagrant délit de lecture en travers !

 
Ah ben voilà, y'a pas plus simple. A noter sur sur FF le résultat est nickel sans margin, et que sur IE il me met automatiquement un mini espace entre les divs, que je peux régler facilement.
 
Merci beaucoup à toi et à Gatsu donc, problem solved, c'est nickel !
 
   
 
 

Bien sûr, j'aurais cru que tout le monde comprenait que ce n'était pas le code d'une vraie page ici mais juste un exemple simplifié au max pour synthétiser mon problème