Hello,
Je ressors ce sujet qui date un peu car j'ai un peu le même genre de souci. Ma mise en page se constitue d'un header, un menu à gauche, un contenu et un footer.
Le menu et le contenu sont respectivement en float left et right, et le footer en clear:both :
Code :
- #menu{
- background-image:url(../image_library/menu.gif);
- background-repeat:repeat-y;
- border-left:2px ridge gray;
- border-right:2px ridge gray;
- width:146px;
- height:100%;
- float:left;
- }
- #content{
- background-color:white;
- border-right:2px ridge gray;
- height:100%;
- width:495px;
- padding-right:5px;
- float:right;
- font-size:0.8em;
- }
- #footer{
- background-image:url(../image_library/footer.gif);
- background-repeat:repeat-x;
- border:2px ridge gray;
- border-bottom:0px;
- height:26px;
- padding-top:6px;
- clear:both;
- }
|
(Tout ce joli monde est contenu dans un div pour centrer la page)
Mon problème est le suivant : comment faire en sorte que le div #content ait la même hauteur que #menu (et inversement) ?
J'ai bien essayé de leur donner un min-height à 100% avec le conteneur et le body en height à 100%, mais quand je fais ça, la hauteur de #content (et sans doute du menu) ne s'adapte plus à leur contenu..
Il doit sans doute s'agir d'une question bête (car il me semble me souvenir avoir déjà eu ce problème et l'avoir résolu), mais je bloque.
Vala, merci à mes futurs sauveurs.