Présentation à 2 colonnes Full CSS

WRInaute impliqué
Bon alors voilà le topo du jour.
J'ai un conteneur dans ma page de largeur fixe avec une entête, un menu/contenu (affichés sur le même niveau) et un pied de page).
En gros ça donne
Code:
+--------------------------+
| ENTETE                     |
+--------------------------+
|MENU |    CONTENU    |
+--------------------------+
| PIED                         |
+--------------------------+

Par contre voilà le dilemne : le MENU est assez long (640px mais variable selon les pages) alors que CONTENU peut ou pas être supérieur à 640 pixels (ça oscille en 250 et plus de 1000 lors de gros listings).

Alors me direz-vous, utilise la technique "float" pour positionner.
Oui mais un p'tit coup de clear:both; dans contenu fait descendre la suite du flux en dessous du bas du MENU. Pas top.

Et la technique des positions absolues, c'est cool mais MENU empiète et le PIED se retrouve en gros à mi-hauteur du menu ... pas top non plus.

Le soucis dans tous les tutos d'internet c'est que le contenu est toujours pris assez long dans les exemples pour que ça marche. Chez moi j'ai des hauteurs variables et j'aimerais que le conteneur suive la taille de la plus grande des boites (MENU si MENU > CONTENU ou CONTENU si CONTENU > MENU).

Voilou le topo :/ y'a une solution à ça ?
 
WRInaute impliqué
Oh super énorme ^^ ça ne faisait pas partie de mes favoris mais je vais y remédier.
Merci j'vais potasser tout ça :)
 
WRInaute impliqué
Ouais bon j'ai regardé et c'est vraiment une galère monstrueuse. Leurs modèles évitent à chaque fois mon cas sachant que la meilleure méthode reste celle basée sur les float: ... manque de bol comme j'utilise des clear:both; dans ma partie contenu, retour à la case départ car ça décalle le texte ...

La propriété "min-height" est super mais IE la comprend pas ... les CSS c'est cool mais là ça pompe sévère :/
 
WRInaute passionné
The Jedi a dit:
Oui mais un p'tit coup de clear:both; dans contenu fait descendre la suite du flux en dessous du bas du MENU. Pas top.
Normal, le clear:both ramène le bloc dans le flux naturel, duquel le bloc flottant était partiellement sorti.

Et la technique des positions absolues, c'est cool mais MENU empiète et le PIED se retrouve en gros à mi-hauteur du menu ... pas top non plus.
Il faut éviter les absolute qui sortent complètement du flux naturel, ça complique le positionnement

Chez moi j'ai des hauteurs variables et j'aimerais que le conteneur suive la taille de la plus grande des boites (MENU si MENU > CONTENU ou CONTENU si CONTENU > MENU).
Et autre contrainte : le pied sous les plus haut des 2.

Alors essaye cette structure :

en CSS
Code:
#conteneur{ }
#entete { }
#menu { float:left; }
#contenu { }
#pied { clear:both; }

en html (attention : certains div peuvent être remplacés par des balises html de bloc; par exemple <ul id="menu">)
Code:
<div id="conteneur">
<div id="entete">
</div>
<div id="menu">
</div>
<div id="contenu">
</div>
<div id="pied">
</div>
</div>
 
WRInaute impliqué
Merci eservice mais si j'utilise un clear:both; dans mon #contenu, je vais revenir à nouveau dans le flux normal et repasser sous le menu non ?
Y'a pas une parade pour ça ?

J'ai la tête en vrac depuis hier à cause de tout ça >_< je plains les débutants
 
WRInaute impliqué
WRInaute passionné
The Jedi a dit:
Merci eservice mais si j'utilise un clear:both; dans mon #contenu, je vais revenir à nouveau dans le flux normal et repasser sous le menu non ?
le clear:both est dans le pied, pas dans le contenu
 
WRInaute passionné
j'ai fait une mise en page fixe 3 colones compatible a partir de ie5 :)
Et le conteneur se redimensionne automatiquement en dessous de la plus grande des boites
si ca t'interresse contact moi par mp
A+++
 
WRInaute impliqué
Eservice a dit:
The Jedi a dit:
Merci eservice mais si j'utilise un clear:both; dans mon #contenu, je vais revenir à nouveau dans le flux normal et repasser sous le menu non ?
le clear:both est dans le pied, pas dans le contenu

Ca j'avais compris mais dans mon contenu je l'utilise aussi car j'y positionne des éléments en float ;)
 
WRInaute passionné
The Jedi a dit:
Ca j'avais compris mais dans mon contenu je l'utilise aussi car j'y positionne des éléments en float ;)
Je ne crois pas qu'il soit nécessaire de faire un clear:both sur un bloc contenant des blocs flottants. Les enfants vont s'y positionner en respectant la position du parent.

Quelle est la structure de ton bloc contenu ?
 
WRInaute impliqué
Ben en fait j'utilise le float pour des images donc je suis obligé de faire un clear:both sinon les images s'empiètent méchamment.
 
Discussions similaires
Haut