Hauteur relative d'un parent dans un design "responsive"

Bonjour,

Voilà, je bute:
Je réalise un design flexible comprenant un empilement de blocs dont le premier, positionné en "relative", contient des enfants de type image, positionnés en "absolute" (en vue de réalisation de fade). Le problème est qu' avec cette configuration, le seul moyen de ne pas voir les blocs suivants remonter est d'assigner une hauteur fixe au premier. Oui mais voilà, c'est un design fluide, et mon bloc 1 est sensé prendre de la hauteur à l'expansion de la page:

<div id='page'>
 <div id='b1'>
  <img src='jkhkjh'.jpg />
  <img src='dfds.jpg' />
 </div>
 <section id='b2'><h1>Titre section</h1><p>bqsf fgdjhf</p></section>
</div>

Côté CSS:

#page{
max-width: 1024px;
margin: 0 auto;
}
#b1{
position: relative;
height[#red]:50px[/#];
}
#b1 img{
position: absolute;
}

Comment feriez vous pour conserver une distance proportionnelle entre #b1 et la section suivante, tout en lui garantissant une hauteur flexible ?

Merci d'avance pour vos suggestions

bonjour,

Il te suffirait de garder une image dans le flux et en relatif pour appliquer un z-index et les autres en absolu pour le empilées.
Plus besoin alors de donner une hauteur arbitraire au div.

++

gc-nomade a écrit :
bonjour,

Il te suffirait de garder une image dans le flux et en relatif pour appliquer un z-index et les autres en absolu pour le empilées.
Plus besoin alors de donner une hauteur arbitraire au div.

++

Simplissime

Je vais tester ça aujourd'hui

Un grand merci