[Résolu]DIV CSS & IE5...

Bonjour,
J' ai une page qui comprend 4 div :
- une entete
- une partie gauche
- une partie droite
- un pied de page
Le HTML

<div id="container">
  <div id="header">
    <a href="http:.../portail/">
      <img class="logo" src="images/logo.jpg" alt="Retour vers..." />
    </a>
    <h1>Titre de la page</h1>
  </div>
  <div id="left">
    <h2> Les Fiches Pratiques</h2>
    <dl>
      <dt>
        <a href="fiche_01.pdf" title="blabla...">Descrition 01...</a>
      </dt>
...
      <dt>
        <a href="fiche_n.pdf" title="blabla...">Descrition n...</a>
      </dt>
    </dl>
  </div>
  <div id="right">
    <h2>Des questions que vous vous posez...</h2>
    <dl>
      <dt>
        <a href="question_01.pdf" title="blabla...">Descrition 01...</a>
      </dt>
...
      <dt>
        <a href="question_n.pdf" title="blabla...">Descrition n...</a>
      </dt>
    </dl>
  </div>
  <div id="footer">
blablabla...
  </div>
</div>
</body>
</html>

Le CSS

html, body {width:100%; height : 100%;}
body {
margin : 0;
padding : 0;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 0.7em;
background-color : #ffffff;
color : black;
overflow : hidden;
}
#container {
width            : 100%;
height           : 100%;
position         : absolute;
background-color : #ffffff;
}
#header {
height           : 100px;
background-color : #ffffff;
}
#left {
position         : absolute;
left             : 0;
width            : 50%;
overflow         : auto;
background-color :#ffffff;
border : 1px;
}
#right {
position         : absolute;
right             : 0;
width            : 50%;
overflow         : auto;
background-color :#ffffff;
border : 1px;
}
#footer {
clear: both;
height           : 40px;
background-color : #ffffff;
}
#avertissement p {
text-align     : center;
}
p {margin: 0 0 10px 0;}
img {border:none;}
a {color:#000000; text-decoration:none; height:100%; border:0 none;}
a:hover {color:#ffffff; background-color:gray;}
a:focus {color:#00feee;}
a.inline {color:#000000; text-decoration:none; font-weight :bold; display:inline;}
img.ico {height:20px; width:20px;}
img.logo {display:inline; height:80px; width:80px;}
h1 {display:inline;}

Je ne vois pas mon pied de page à l'affichage !

bunob a écrit :

Je ne vois pas mon pied de page à l'affichage !

Oui puisque celui-ci est le seul élément de la page qui se trouve dans le flux.
Donc il est placé derrière tous les élements en absolu.
D'ailleurs je ne comprends vraiment pas du tout la logique du choix des positionnements, ni l'utilité d'une propriété "clear" dans un document sans aucun élément flottant (sachant que c'est une propriété qui n'agit que s'il y'a des flottants).

Je crois qu'un gros effort est à faire sur la compréhension du positionnement en CSS, car je crois que tu as choisi tes propriétés un peu au hasard sans en connaître les conséquences

J'ai revu mon choix. J'utilise float left et float right et maintenant cela marche.

#container {
width            : 100%;
height           : 100%;
position         : absolute;
background-color : #ffffff;
}
#header {
height           : 100px;
background-color : #ffffff;
}
#left {
margin-left:4px;
float            :left;
width            : 49%;
height           : 400px;
overflow         : auto;
background-color :#ffffff;
border-width:1px;
border-style:solid;
border-color:gray;
}
#right {
margin-right:4px;
float            : right;
width            : 49%;
height           : 400px;
overflow         : auto;
background-color :#ffffff;
border-width:1px;
border-style:solid;
border-color:gray;
}
#footer {
margin-left:4px;
margin-right:4px;
clear: both;
position: absolute;
bottom:0px;
height           : 40px;
background-color : #ffffff;
}

Modifié par bunob (26 Oct 2005 - 12:39)