28221 sujets

CSS et mise en forme, CSS3

Salut,

Pour un design 2 colonnes (une principale avec le contenu et une avec des menus sur la droite), je me suis basé sur ce modèle.
J'ai fait sauter la colonne gauche, et mis à la colonne droite une largeur en em. Jusque là, tout va bien.
Mon problème se situe au niveau du footer : si j'ai bien compris, le fait que la colonne droite soit positionnée en absolute fait qu'elle ne repousse pas le footer.
Or, je voudrais adopter ce modèle sur l'ensemble de mes pages. Sur certaines d'entre elles, le menu droit risque d'être certains jours plus long que le contenu principal.
Comment faire pour que le footer soit forcément repoussé par le contenu ET par le menu droit ?

Merci Smiley biggrin
Il faut utiliser le positionement flottant, et le clear: both; sur le pied de page.

Tu peux faire une recherche sur le forum, ça a été traité pas mal de fois Smiley cligne
J'ai essayé le positionnement flottant (je suis tombé entre temps sur une réponse, de toi d'ailleurs, sur ce sujet), mais j'ai des problèmes liés aux dimensions apparemment :
1) Ma colonne droite doit avoir une largeur en em
2) Ma colonne gauche doit prendre tout le reste de la largeur du parent
3) Le footer doit suivre les 2 colonnes

1) ok
3) ok avec clear : both en ayant mis les 2 colonnes au dessus en float : left
2) Tant que je ne donne pas une largeur explicite à la colonne principale (gauche), elle provoque systématiquement un passage de la colonne droite en dessous. Or, je ne veux pas donner de largeur à la colonne de contenu.

PS : Oui j'ai du mal aec les float Smiley sweatdrop
Oui comment faire pour que le footer se retrouve en bas, quand le contenu n'est pas rempli au max en 1024*768 le fotter se retrouve vers le milieu,
meme avec un height:100%; ca ne marche pas.
Nononon stop cette question n'a rien à voir avec mon post.
Moi je cherche à ce que le footer sois sous le contenu et sous la colonne gauche. Qu'il ne soit pas collé au bas de la page m'importe peu.

2 sujets différents = 2 threads différents

Merci
Vous pouvez peut être regardé le début de page que je suis en train de faire sur Page de test

J'ai un header header,menu horizontal,menu gauche en flottant, mon div du centre qui prend le reste de la largeur, et un pied de page.

Si cela peut vous aider. Comme cela vous pourrez tester ma page et me dire si tout va bien avec votre configuration.

Smiley cligne
essaye avec ca
#header, #conteneur, #pied {
	display: table;
	width: 100%;
}
#gauche {
	float:left;
}
#droite {
	float:left;
}
#gauche, #droite {
	display: table-cell;
	height: 100%;
}
#pied {
	clear: both;
	position: relative;
}

Modifié le 22 Dec 2004 - 17:49
Je teste tout ça et je vous dis ce que ça donne.

Bon après tests, voilà ce que ça donne (arrêtez moi si je me trompe) :
1) Seul une colonne doit être en float, on met à l'autre une marge de la même largeur
2) Le pied de page n'étant pas float, il sera poussé par la colonne principale, qui fait partie du même flux
3) Le pied de page ayant un clear:both, il sera poussé par la colonne de menu

=> Se débrouiller pour ne pas avoir à faire usage du clear dans la colonne principale sinon problèmes à la clé

Am I right, Sir ? (les connaisseurs apprécieront la référence Smiley lol )
Modifié le 23 Dec 2004 - 12:40