[CSS] Problème de mise en page

[molgow]

Hello tout le monde,

Je suis confronté à un petit problème de mise en page avec des CSS (pas de tableaux!).

Voilà ce que je désire faire :

Description du problème: les 2 menus à gauche et à droite ont une taille indéfinie. Je souhaiterais que le pieds de page soit toujours plus bas que le maximum de hauteur entre ces 2 colonnes. J'aimerais également que le bas de page soit plus bas dans les cas où le contenu est plus haut que la plus haute des colonnes. Les colonnes ont une largeur fixe par contre.

Mon problème se situe évidemment au niveau du bas de page. Je n'arrive pas à avoir le comportement souhaité : il reste tout le temps "collé" au contenu quoique je fasse.

Quelqu'un aurait-il une petite idée de comment faire ça proprement ?

Merci,

Molgow

 

[maousse]

http://www.alistapart.com/articles/footers/

cet article devrait t'aider, ça passe par du javascript standard. Mais c'est LE gros problème avec une mise en page par css pure...

à moins "d'emballer" avec un <div id="container"> et de lui donner l'attribut height:100%, et de caler le footer en bas. Mais cette solution n'est sans doute pas viable partout, je n'ai jamais testé, donc, c'est une vue de mon esprit fatigué, purement imaginaire, donc... à prendre avec des pincettes

 

[maousse]

http://webhost.bridgew.edu/etribou/layouts/3col_footer/archives/3col_footer_02/index.html

c'est pas ça que tu cherches ?

ça aussi, tu devrais trouver ton bonheur :
http://www.mentalized.net/cssdepot/layouts/LeftFluid_MiddleFluid_RightFluid_Footer.asp

 

[molgow]

ça aussi, tu devrais trouver ton bonheur :
http://www.mentalized.net/cssdepot/layouts/LeftFluid_MiddleFluid_RightFluid_Footer.asp

Celui-ci ressemble exactement à ce que je recherche !!!

Je regarderais ça demain à tête reposée!
Merci!

 

[Niconemo]

clear: both

Oui, on m'a donné cette solution il y a quelques temps ça signifie que le div n'acceptera aucun autre div sur la même ligne (des deux côtés).
Ça marche du tonnerre et sert dans des tas de circonstances, même vide et invisible (contenant seulement &nbsp; par exemple), ça permet souvent de débugger une mise en page récalcitrante en le plaçant sous les colonnes.
À noter que clear:left et clear:right existent aussi (ça peut servir).

 

[molgow]

Exactement. Mon CSS était presque "correct", il manquait justement ce clear: both;.
Par contre, je me suis rendu compte que ça ne fonctionne pas du tout sur IE 5.2 Mac. Mais tant que c'est sur ce navigateur, ça me gène pas trop. De toute manière, qui utilises encore ce navigateur pourri sur Mac?

 

[Niconemo]

Chez moi ça marche sous MSIE :heu: :
Cocoricones : il y a une div "clear:both" sous les deux colonnes, sinon le cadre général blanc général est tout petit en hauteur et les 2 colonnes passent au dessus.

#Edit : Mais c'est vrai que le cas est légèrement différent puisque ce div occupe toute la largeur alors que dans ton cas il fait seulement la largeur de la colonne centrale.

À noter que sous Mozilla (Camino et Firefox) il ne faut pas que la div soit vide (d'où le "&nbsp;" )

 

[molgow]

Euh... en fait ça marche à présent. J'avais commis une "erreur".

Vous allez rire, mais IE 5 Mac interprète mal le cas où on lui donne un :

<div class="maclasse" id="monid" style=""> ... </div>

J'ai supprimé le style="" et après le comportement était correct!

 

[Niconemo]

Des fois je suis affolé quand je vois tout ce qu'il faut retenir pour chaque navigateur... enfin surtout un.

 

[molgow]

En cherchant "ie bugs" sur Google, on tombe là dessus :

The weird and wonderful world of Internet Explorer

Si IE n'existait pas, le développement web serait trop simple. Heureusement que Microsoft est là pour mettre un peu de piment