28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous.
Ca fait un moment que je lis ce forum et que j'y trouve l'aide et les conseils nécessaires mais cette fois ci je ne trouve vraiment pas aussi je viens vous poser ma question.

Voici d'abord le gabarit de mon site (merci paint Smiley lol ) :

upload/6300-gabarit.JPG

Le menu gauche est en largeur fixe et hauteur 100%
Le haut et le pied de page ont un hauteur fixe et une largeur fluide
Le corps occupe le reste de l'espace en hauteur et en largeur avec un overflow.

Voici le code html (plutot basique) :


<div id="menugauche">
	blabla menu
</div>

 <div id="header">
	banniere n co
 </div>

 <div id="corps">
	Contenu
 </div>

 <div id="footer">
	mentions diverses
 </div>


Note: Je n'ai pas utilisé de conteneur car a chaque fois ça me créait des problemes de positionnement que je n'arrivais pas à résoudre

Et le CSS:

html, body {
height:100%;
width: 100%;
margin: 0;
padding: 0;
background-color: #ebe9e9;
}

#menugauche {
position:absolute;
left: 0;
width: 180px;
height: 100%;
}

#header {
position: absolute;
top:0;
right: 0;
left: 180px;
height: 160px;
}
#corps {
position:absolute;
left: 180px;
right: 0;
top: 160px;
bottom:50px;
height:auto;
overflow: auto;
}

#footer {
position:absolute;
left:180px;
height:50px;
right: 0;
bottom:0;
}

p 
{
margin: 0 0 0 0;
}


Encore une fois, tout est en absolu et sans conteneur car je n'ai pas réussi à faire autrement !

Ca fonctionne donc correctement sous Firefox mais sous IE, l'overflow ne marche pas et le corps se trouve allongé selon le contenu (tout en passant sous le pied de page.
Je suppose que le soucis vient du height:auto mais je ne vois pas comment procéder autrement.

Y'a t'il un moyen de faire passer ça correctement sous IE à l'aide du CSS ou m'y suis je mal pris pour mon gabarit dans l'ensemble, que me conseilleriez vous alors ?

Merci de votre aide.