Problème de CSS - Overflow mais pas trop

Bonjour à toutes et tous, cela fait un bail que je n'ai pas posté ici.

Je viens vers vous car je me casse la tête sur un truc qui, à priori n'est pas faisable… mais il y a peut-être quelque chose qui m'échappe, donc vos conseils pourrons peut-être m'aider à trouver la solution.

Un dessin de la situation :
http://momofr.free.fr/down/probleme_css.jpg

Je souhaiterais avoir une image liée à mon sidebar de droite qui déroule en hauteur si le contenu est plus haut que le sidebar (visuel du haut) et que le sidebar pousse sur sa hauteur si il est plus haut que le contenu (visuel du bas).

Cette image va avoir une hauteur de 2500 px environ.

Si le l'ancre en absolute au sidebar en float left (ou right) sa hauteur est prise en compte (même si je la met en background d'un contenant) et du coup j'ai mes 2500 px qui poussent vers le bas.

J'aurais pu la mettre en bakcground du grand contenu central (celui qui gère l'overflow:hidden) mais elle ne sera pas positionnée en fonction de la hauteur du sidebar, hors ce dernier est à hauteur variable…

J'ai pour l'instant mis le sidebar en absolute et là ça marche pour le masquage de l'image (en bas) mais le sidebar ne pousse plus du coup quand il est plus long que le contenu.

Il me semblait avoir vu des poupées russes CSS qui faisaient ce genre de chose mais impossible de retrouver la source.

Une piste ?
Modifié par momo-fr (18 Jun 2010 - 19:16)

Bonjour,

2500px de hauteur? OK.

<div class="content">
  <div id="main">
    ...
  </div><!--#main-->
  <div id="sidebar">
    <span id="sidebar-deco"></span>
  </div><!--#sidebar-->
</div><!--#content-->

#content {
  overflow: hidden; /* gère dépassement des flottants (contenus) et de l'image de sidebar (masquée) */
}
#main {
  float: left;
  ...
}
#sidebar {
  position: relative; /* important */
  margin-left: 500px; /* largeur de #main */
}
#sidebar-deco {
  position: absolute;
  bottom: -2500px;
  left: 0;
  height: 2500px;
  width: 100%;
  background: url(...); /* Image de déco sous la sidebar */
}

Existe aussi en turquoise, ou avec un vrai contenu HTML à la place d'un SPAN vide+image de fond.
Modifié par Florent V. (18 Jun 2010 - 19:22)

Ho pitain !!! Que je suis c#n !!

Un SUPER grand merci Florent, voilà ce qui arrive quand on gère 3 boulots de front… que ça serve de leçon à d'autres (si possible).