Clear : both, oui mais

Bonjour à tous,

J'ai tenté de modifier mon design pour améliorer sensiblement la navigation dans mon site Web.

Au lieu de forcer le navigateur à incruster une deuxième barre de défilement au cas où la page serait trop grande, j'ai mis une valeur minimale pour la hauteur de ma div.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

div#page { height: 420px; width: 680px; padding-top: 30px; background: #FFFFFF; padding-left: 30px; padding-right: 30px; color: #660033; font-size: 1.2em; } html>body #page { height: auto; min-height: 420px; }

---

Lorsque le contenu de la page est infèrieur à 420px, c'est nickel.
En revanche, lorsque celui-ci dépasse les 420px, le contenu passe sur le footer.
Or je désirerai que le footer s'abaisse tout simplement.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

div#footer { height : 25px; width : 900px; background-image: url("images/footer.jpg"); background-repeat: no-repeat; text-align: center; font-family: "Century Gothic", Verdana, Arial, serif; /* On essaie d'avoir Century Gothic en priorité, à défaut on obtiendra Verdane et ainsi de suite. Serif est une police présente sur TOUS les ordinateurs */ font-weight : bold; font-size : 1.1em; color: #660033; clear : both; }

---

Pour cela j'utilise la propriété clear : both mais cela ne donne rien.

Auriez-vous une idée ?

Lien pour exemple

A noter que ça bug uniquement sur FF et MSIE 7.
En effet sous MSIE 6, cela fonctionne parfaitement ;) .

J'ai résolu mon problème, il fallait également ajouter le hackIE sur la div corps.