Faire une zone qui englobe 2 divs

Salut à tous,

Je suis entrain de bosser sur un projet de site et j'ai besoin d'aide...

Mon problème, j'ai pour l'instant une div "corps" pour le corps de la page avec une zone "entete" au dessus et une zone "pied de page" en dessous.

Dans cette zone corps, j'ai 2 autres zones "menu" et "contenu", respectivement à gauche et à droite.

Jusque là, tout marche bien.

Cependant, pour intégrer ça correctement à mon site, il faudrait que la zone "corps" s'adapte à la plus grande des 2 pour faire le lien entre l'entête et le pied de page (pour remplir ce qui manque en blanc).

Ca marche bien sous IE grâce à une mauvaise interprétation du CSS, mais pas sous Opera, ni sous FF...

Et comme je veux que ça marche sous les 3, c'est là que vous venez en renfort !

L'adresse du site : http://ehretic.sytes.net/vbcr2

Il y aussi plus d'infos sur le site du zero à cette adresse là : Post sur le Site du Zero

Même si c'est un peu du crossposting, ça peut "1" avoir plus d'impact et "2", ça explique aussi le cheminement que j'ai fait pour le CSS.

Merci d'avance pour vos conseils !
Modifié par EHRETic (03 Apr 2007 - 14:28)

Salut,

Apparemment, tes 2 colonnes sont positionnées en flottants. Pour que #corps prenne en compte les flottants dans le calcul de sa hauteur, il suffit de créer un contexte de formatage sur ce div, pour Firefox, IE7, ...

Pour IE6, il faut doter #corps du layout, par exemple en spécifiant une hauteur d'1% via les commentaires conditionnels.

Alors, j'ai tout lu, mais bon, même si je pense avoir un peu compris le principe, je tatonne encore.

Ce que j'ai fait pour que "corps" s'adapte, j'ai rajouté :

clear: both;
overflow: auto;

dans la div "corps" (en enlevant le clear both de la div "pied_page"

Mais le problème, c'est que maintenant, les div "menu" et "contenu" sont coupées en haut (ça passe en dessous de "entete").

Pour l'explication, ce qui est dans "menu" et "contenu" doit être par la suite un peu relevé pour que ça s'adapte au design (voir l'exemple sur www.ehretic.fr)

PS : www.ehretic.fr était quelque chose que j'avais adapté, mais maintenant, je veux le remplacer par quelque chose de plus puissant (PHP MySQL derrière), et mes propres feuilles de style, histoire d'avoir qq chose de propre et d'apprendre aussi...
Modifié par EHRETic (03 Apr 2007 - 15:38)

Salut,

Ouarf quel code, mais bon on est tous là pour se tromper !
Juste une piste:

body

{
   font-family: "Trebuchet MS", helvetica, sans-serif;
   background-image: url(fond.gif);
}

div#conteneur {
   width: 980px;
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px;
}

div#corps {
   background-color: #CCCCCC;
   overflow: hidden;
}

div#entete {
   z-index:1;
   height: 253px;
   background: lime;
   background-repeat: no-repeat;
}

div#entete h1 {
	height: 120px;
	visibility: hidden;	
}

div#menu {
   position: relative;
   float: left;
   width: 174px;
   height: auto;
   background-color: #FF0000;   
}

div#contenu {
   position: relative;
   overflow: hidden;
   float: right;
   width: 806px;
   background-color: #0000FF;
}

div#pied_page {

   width: 980px;
   height: 43px;
   background-image: url(pied_page.png);
   background-repeat: no-repeat;
   padding-top: 10px;
   padding-left: 10px;
   font-size: 0.8em;
   clear: both;
}

C'est clair que mon code est pas encore parfait !!! Mais il y avait encore des restes des essais que j'ai fait avec la proposition de Thomas D

Malheureusement, le code que tu me proposes ne va pas du tout. Les couleurs que j'ai laissé à gauche et à droite sont juste là pour m'aider à voir ce qui se passe...

J'ai remodifié les couleurs et enlevé le superflux pour que tu puisses voir le résultat "final" (le vrai "final" sera sans couleur merdiques ! )

->http://ehretic.sytes.net/vbcr2
Modifié par EHRETic (03 Apr 2007 - 19:32)

Pour aider, voilà les résultats sous IE (ce que je voudrai avoir sur tous les systèmes), et sous FF après.

La partie grise sera bien entendu blanche par la suite, c'est juste pour qu'on voit bien !

IE (6 & 7 donnent le même résultat) :

http://ehretic.sytes.net/vbcr2/images/ie6-7.jpg

FF (ya pas de partie grise ! ):

http://ehretic.sytes.net/vbcr2/images/ff.jpg

<modération>Merci d'éviter les images trop larges qui déforment le forum</modération>
Modifié par Julien Royer (03 Apr 2007 - 20:17)