3 colonnes avec la liquide à gauche

Bonjour,

Malgré mes recherches, je ne suis pas parvenu à trouver une personne ayant eu le même problème.

Mon site web a le layout suivant : trois colonnes. Celle de gauche est liquide. Les deux de droite ont une largeur fixe.

Avec le code actuel (tel que mis en dessous), je suis obligé d'appeler dans mon code html la création des colonnes centrales et droite avant la colonne de gauche. J'ai cru comprendre que c'était dû au fait qu'il faut afficher les float en premier. Si je les appelle après la colonne de gauche qui est liquide, elles se retrouvent en dessous au lieu d'être à côté.

J'ai essayé d'ajouter un float:left dans la colonne liquide de gauche mais rien n'y fait, elles se retrouvent quand même en dessous si je les appelle après l'affichage de la colonne de gauche.

Le problème est que ces colonnes ayant une largeur fixe contiennent des éléments récurrents (menus, pubs, ...) donc je préfèrerais que les retrouver tout en bas du code HTML. Est ce possible?

Voici le code CSS :

#container /* container englobant les trois colonnes */
{
margin-bottom: 5px;
}

#content /* colonne de gauche, liquide */
{
margin-left: 10px;
margin-right: 400px;
padding: 1em;
padding-top: 6px;
margin-top: 12px;
text-align: justify;
background-color: #fff;
}


#leftnav /* colonne centrale de largeur fixe */
{
float: right;
width: 180px; 
padding: 0px;
padding-top: 0px;
margin-top: 12px;
margin-left: 5px;
text-align: left;
}

#rightnav /* colonne de droite de largeur fixe */
{
float: right;
width: 185px;
padding: 6px;
padding-top: 12px;
margin-top: 12px;
margin-right: 5px !important;
margin-right: -5px;
text-align: left;
}

Salut firebird et bienvenue ,

effectivement les éléments flottants doivent être placés avant les autres dans ton conteneur.

firebird a écrit :

Le problème est que ces colonnes ayant une largeur fixe contiennent des éléments récurrents (menus, pubs, ...) donc je préfèrerais que les retrouver tout en bas du code HTML. Est ce possible?

Hmm... pas compris.

Sinon on dit plutôt fluide que liquide.

Salut Heyoan,

Merci pour ta réponse rapide et pour ce forum très complet!

Dans mon design, la colonne fluide contient les contenus propres à chaque page. Les deux colonnes à largeur fixe à droite contiennent le contenu récurrent (les menus, les pubs, etc...).

Quand je génère la page actuellement, je suis forcé d'appeler les deux colonnes à largeur fixe qui sont en float avant la colonne fluide sinon elles passent en dessous à l'affichage.

Du coup, lorsque tu ouvres le source html, tu te retrouves avec tous les contenus récurrents avant le contenu propre à chaque page alors que je voudrais le contraire.

C'est pour cela que je voudrais passer en premier la colonne fluide de gauche en float:left et repasser l'appel des deux colonnes à largeur fixe en float:right après l'appel de la colonne fluide mais ça ne marche pas, les deux colonnes en float:right repassent en dessous quand je fais cela comme si le float:left de la colonne fluide n'était pas pris en compte.

Il faudrait voir le code html correspondant. L'idéal serait d'ailleurs un lien vers une page en ligne.


Edit: sinon le plus simple est peut-être de rajouter un position:relative à #container et de mettre #leftnav et #rightnav en position:absolute. Il ne te restera plus qu'à les positionner à l'aide de top: nn px; et right: nn px;
Modifié par Heyoan (28 Aug 2008 - 12:40)

Tu es une star! ça marche!

Pour ceux que cela intéresse, voici ce que j'ai fait suivant tes conseils :

#container /* container englobant les trois colonnes */
{
margin-bottom: 5px;
position:relative;
}

#content /* colonne de gauche, liquide */
{
margin-left: 10px;
margin-right: 400px;
padding: 1em;
padding-top: 6px;
margin-top: 12px;
text-align: justify;
background-color: #fff;
}


#leftnav /* colonne centrale de largeur fixe */
{
position:absolute;
top:10px;
right:0px;
width: 180px; 
padding: 0px;
padding-top: 0px;
margin-top: 12px;
margin-left: 5px;
text-align: left;
}

#rightnav /* colonne de droite de largeur fixe */
{
position:absolute;
top:0px;
right:200px;
width: 185px;
padding: 6px;
padding-top: 12px;
margin-top: 12px;
margin-right: 5px !important;
margin-right: -5px;
text-align: left;
}

Je n'utilise donc plus aucun float et j'ai le résultat souhaité! Merci beaucoup!

Seul petit problème, maintenant, le pied de page se met en dessous de la colonne de gauche (celle qui est fluide). Quand la colonne de gauche est plus grande que les sidebars, aucun pb mais quand c'est l'inverse, les sidebars passent au dessus du footer qui n'est plus vraiment un footer du coup

voici le code du footer :

#footwrap
{
clear:both;
background: url(img/pied.jpg) top left;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
height:50px;
padding:10px 0 0 0px;
color: #007F0E;
font-weight: normal;
}

Bonjour,

à ce second problème, il me semble que la seule possibilité de correction reste le javascript. Etant en position absolue, tes éléments ne pourront jamais "pousser" le footer vers le bas. Une fonction javascript prévue pour retrouver la hauteur de tes éléments absolus, les comparés à la hauteur de ton élément "contenu" et de modifier la hauteur de celui-ci si nécessaire me semble la meilleure alternative.

J'espère avoir été clair (c'est rarement le cas )

firebird a écrit :

Seul petit problème, maintenant, le pied de page se met en dessous de la colonne de gauche (celle qui est fluide). Quand la colonne de gauche est plus grande que les sidebars, aucun pb mais quand c'est l'inverse, les sidebars passent au dessus du footer qui n'est plus vraiment un footer du coup

Yep... C'est le problème avec le positionnement absolu car l'élément est sorti du flux et il ne pousse plus le conteneur pour lui laisser de la place. Tout dépend donc de la mise en page et dans ton cas ça pose problème !

Du coup j'aurais tendance à dire que ta première version était sans doute la meilleure. Et pour ce qui est de :

a écrit :

Quand je génère la page actuellement, je suis forcé d'appeler les deux colonnes à largeur fixe qui sont en float avant la colonne fluide sinon elles passent en dessous à l'affichage.

Du coup, lorsque tu ouvres le source html, tu te retrouves avec tous les contenus récurrents avant le contenu propre à chaque page alors que je voudrais le contraire.

Quel est le problème ?

bhen a écrit :

à ce second problème, il me semble que la seule possibilité de correction reste le javascript. Etant en position absolue, tes éléments ne pourront jamais "pousser" le footer vers le bas. Une fonction javascript prévue pour retrouver la hauteur de tes éléments absolus, les comparés à la hauteur de ton élément "contenu" et de modifier la hauteur de celui-ci si nécessaire me semble la meilleure alternative.

Ben c'est vrai que si Javscript est activé ça doit fonctionner mais ça me semble quand même se compliquer la vie pour pas grand chose.

En fait, en faisant des recherches sur google, jai fini par trouver une solution à ce problème, j'ajoute quelques lignes pour la hauteur au conteneur :

#container
{
height: auto !important;
height: 2300px;
min-height: 2300px;
margin-bottom: 5px;
width: 100%;
position:relative;
}

Du coup, il me positionne le footer au minimum après les deux colonnes qui sont positionnées en relative et si la colonne fluide est plus grande, il positionne le footer en dessous. Apparemment, cela semble fonctionner sous IE 6 et FF.

Bon maintenant, ceci a déclenché un nouveau problème, j'ai certaines images de fond qui sont ancrées dans le fond en css avec le background-url dans certains div qui sautent de temps en temps. J'avais pas du tout cela avant

A noter que height: auto !important; ne sert à rien (ainsi que width:100%) et que height: 2300px; devrait être placé dans un commentaire conditionnel pour IE < 7

D'autre part cela risque de ne pas suffire en cas d'augmentation de la taille des caractères (Ctrl + Molette avec Firefox).

Si je vire le height: auto !important;, cela ne marche plus sous firefox. En le gardant, ça marche bien, même quand je touche à la taille de la police...

Encore un pb que je viens de voir mais pas très grave, quand je redimensionne la page sous IE6, il réduit la colonne fluide plus qu'il ne devrait...

En fait, IE6 calcule la margin par rapport au bord de la fenêtre au lieu de la calculer par rapport au bord effectif de la page

Je n'ai pas le pb sous FF.