Problème: height en pixels et height en pourcents

Bonjour,
Je viens de passer une nuit entière sur ce problème sans succès.
Tout d'abord, j'ai déclaré le DOCTYPE et bien sûr les height: 100% pour le html et body.
J'aimerais faire un site complètement adaptable en hateur et largueur. Cependant, j'aimerais qu'un bloc <div> ne le soit pas. Qu'il ait une hauteur en pixels fixe.
Avec Firefox, je mets un "height: auto;" pour l'autre bloc <div> qui se trouve dans le même conteneur et ça marche parfaitement. Je n'ai pas de décalage vers le bas.
Tandis qu'avec IE, c'est impossible de mettre un "height: auto;" et si je mets un "height: 100%;", ça ne peut non plus pas fonctionner.
Si ce sujet a déjà été traité, je vous prie de m'excuser.

Voici donc mon code CSS :

.html, .body
   {
   height: 100%;
   background-color: #FFFFFF;
   margin: 0;
   padding: 0;
   overflow: hidden;
   }

.cadre
   {
   width: 90%;
   height: 100%;
   border: 2px solid red;
   background-color: #FFFF99;
   position: absolute;
   top: 0;
   left: 0;
   margin: 0;
   padding: 0;
   margin-right: 10%;
   margin-top: 50px;
   }

.langues
   {
   background-color: #FFFF78;
   width: 220px;
   height: 50px;
   border: 1px solid black;
   border-bottom-width: 0;
   line-height: 25px;
   vertical-align: middle;
   position: absolute;
   top: 0;
   left: 20px;
   }
   
.site
   {
   width: 100%;
   height: 100%;
   border: 1px solid red;
   background-color: #FFFF99;
   margin: 0;
   padding: 0;
   }

.hautgauche, .hautdroite, .basgauche, .basdroite
   {
   width: 20px;
   height: 20px;
   background-repeat: no-repeat;
   font-size: 1px;
   }

.hautgauche
   {
   background: url(../include/hautgauche.gif);
   position: absolute;
   top: 0;
   left: 0;
   }

.hautdroite
   {
   background: url(../include/hautdroite.gif);
   position: absolute;
   top: 0;
   right: 0;
   }

.basgauche
   {
   background: url(../include/basgauche.gif);
   position: absolute;
   bottom: 0;
   left: 0;
   margin-bottom: 50px;
   }

.basdroite
   {
   background: url(../include/basdroite.gif);
   position: absolute;
   bottom: 0;
   right: 0;
   margin-bottom: 50px;
   }

Et mon code HTML :

<div class="langues" align="center">
<b>S&eacute;lectionnez la langue d&eacute;sir&eacute;e</b><br>
<a href="index.php?lang=1"><img src="../include/flag_francais.jpg"></a>&nbsp;<a href="index.php?lang=2"><img src="../include/flag_anglais.jpg"></a>&nbsp;<a href="index.php?lang=3"><img src="../include/flag_allemand.jpg"></a>&nbsp;<a href="index.php?lang=4"><img src="../include/flag_portugais.jpg"></a>&nbsp;<a href="index.php?lang=5"><img src="../include/flag_espagnol.jpg"></a>
</div>

<div class="cadre">
<div class="hautgauche"></div><div class="hautdroite"></div>
<div class="site">test</div>
<div class="basgauche"></div><div class="basdroite"></div>
</div>
</div>

Actuellement, ce code donne plus au moins ce que je veux seulement que c'est très bidouillé. J'aimerais savoir ce que vous en pensez et si il y aurait une manière plus correcte de faire cela ?
Voici le lien du résultat sans les bordures de test :
http://www.cheveux-naturels.com/test.html
Modifié par Skaia (21 Mar 2006 - 19:12)

Bonjour,
Je suis très étonné de voir que personne n'a répondu à mon SOS...
Est-ce que mon problème a déjà été résolu dans un autre sujet sur ce forum ?
Pourriez-vous au moins dire qqchose ?
Merci d'avance.
Modifié par Skaia (21 Mar 2006 - 19:07)

Salut,

tu devrais nous fournir du code, html et css. Parce que pour l'instant ta question n'est pas très compréhensible.

ou mieux un lien si c'est en ligne.

C'est fait !
Merci d'avance pour votre aide !