position: fixed qui m'en veux

[Aenoa]

bonjour ! Joyeux noyel !

J'ai actuellement un soucis avec mon code HTML et CSS. Je désire qu'une div soit visible lors du scroll si jamais la page est très grande en hauteur. Cela marche parfaitement avec l'attribut "position: fixed".

toutefois, si la page n'est pas assez grande en hauteur, ça casse tout =/

voici deux screenshots (en pièce jointe). Le 1er est lorsque ça scroll, le second lorsque c'est trop court.

voici mon code css:

#left_container

{

	float: left;

	clear: left;

	width:411px;

	border-radius: 10px;

	border: #333333 thin solid;

	background: url('images/tainted.png') repeat;

	position:fixed;

	padding: 5px;

}


#right_container

{

	float: right;

	clear: right;

	width: 490px;

	border-radius: 10px;

	background: url('images/tainted.png') repeat;

	border: #333333 thin solid;

	padding: 5px;

}


#footer

{

	clear: both;

	font-size: 12px;

	text-align: center;

	background: url('images/tainted.png') repeat;

	margin-top: 10px;

	padding: 10px;

	color: whitesmoke;

	border-radius: 10px;

	border: #333333 thin solid;

}

Ma question est donc: comment (soit) forcer la footer a respecter l'espace de la div "left_container", (soit) comment faire avoir la propriété "position: fixed" uniquement si la page est trop grande? sans JS de préférence, le html étant du XSL

Merci d'avance

[Ernestine]

Salut,

Tu peux tout simplement mettre un min-height sur #right_container, avec, pour valeur de ce min-height, la hauteur de #left_container. Cela repoussera donc le footer sous cette hauteur

Si ce n'est pas possible de mettre ce min-height directement sur #right_container (pour des raisons de design/décoration), alors tu peux l'englober dans un div parent, et c'est sur ce div parent que tu appliqueras le min-height.

Par ailleurs, tu peux virer le float left sur #left_container : il ne sert à rien, puisqu'il est en position fixed.

Inutile également de mettre un float right sur #right_container : il serait plus judicieux de le laisser dans le flux (avec un margin-left pour le placer sur la droite). Partant de là, si tu retires tous les float, tu peux aussi dans la foulée retirer tous les clear.

[WebD]

Le plus simple serait d'utiliser du js...

En ajouter l'attribut fixed que si la personne scroll, jusqu'à un certain niveau.

[Dadou]

La solution d'Ernestine est de loin la plus élégante, pourquoi s'amuser à alourdir la page avec du JS quand cela peut être fait simplement avec du CSS?