Problème avec height de div conteneur en auto...

Bonjour,
J'ai un soucis de dimensionnement de mon div conteneur visible à cette page : http://www.chalets-vosges.eu/suchelot_essai.html

En bleu, le div conteneur, height en auto, position relative.
En vert, des div en position relative, height en auto aussi.

En rouge, mon div en height auto mais en position absolute...

Le div bleu ne se dimensionne que par rapport au div en position relative (vert) qu'il contient et pas par rapport au div en position absolute (rouge)... Pourquoi..? Parce que dans mon code html, le div rouge est avant les div verts ?

Voici mon CSS :

#bloc_vpp {
	position:relative;
	width:1000px;
	height:auto;
	min-height:335px;
	background-color:#0000CC;
}
#petit_bloc_blanc {
	position: relative;
	width: 350px;
	height: auto;
	left:630px;
	
	margin-top:10px;
	margin-left:10px;
	
	padding-top:10px;
	
	border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px ;
	
	box-shadow: 3px 3px 8px black;
	-moz-box-shadow: 3px 3px 8px black;
	-webkit-box-shadow: 3px 3px 8px black;
	behavior: url(PIE/PIE.htc);
	
	background-color: #0F0;
}
#bloc_planning {
	position:absolute;
	width:620px;
	height:auto;
	margin-left:10px;
	padding-top:10px;
	border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	box-shadow: 3px 3px 8px black;
	-moz-box-shadow: 3px 3px 8px black;
	-webkit-box-shadow: 3px 3px 8px black;
	behavior: url(PIE/PIE.htc);
	background-color:#FF0000;
}
#texte_petit_bloc {
	position:relative;
	left:10px;
	width:310px;
	height:auto;
	margin-left:10px;
	margin-bottom:5px;
}
#texte_planning {
	position:relative;
	width:600px;
	height:auto;
	margin-left:10px;
	margin-bottom:5px;
}

Et voici mon HTML :

<div id="bloc_vpp"> 
  <div id="bloc_planning">
  <div id="texte_planning" class="texte_menu">
    </div>
    <iframe name="planning" SRC="http://www.chalet-montagne.com/_public/planning.php?IDLOC=11243" scrolling="auto" height="900" width="600" marginwidth="0px" marginheight="10px"></iframe>
  </div>
  
<div id="petit_bloc_blanc">
        <div id="texte_petit_bloc" class="texte_menu">
    Découvrez le chalet en vidéo... </div>
<iframe width="330" height="217" src="http://www.youtube.com/embed/-IhquynEcXs?rel=0;wmode=opaque" frameborder="0" allowfullscreen></iframe>
    </div>
    
  <div id="petit_bloc_blanc">
    <div id="texte_petit_bloc" class="texte_menu">
    Visionnez les photos... 
    </div>
    
  </div>
</div>

Je suis un peu novice, j'essaye de coder propre mais je n'ai jamais vraiment appris à coder !

Du coup sur ma page, j'ai régler la hauteur de l'iframe dans le bloc_planning à la bonne valeur pour que ce soit aligné avec le bloc contenant les photos..
La page en ligne est visible ici : http://www.chalets-vosges.eu/suchelot.html

Ca pourrait convenir mais sur iOS, l'iframe est affiché en entier et du coup ça fait moche puisque le contenu de l'iframe et sous les div d'en dessous...

Merci par avance à ceux qui pourront m'aider !
J'espère avoir été clair..

Bonjour,

le position absolute fait que ton div n'est pas compris dans le flux de la page. Il n'a donc pas d'impact sur la hauteur/largeur de son père, puisqu'il est considéré hors flux.

si tu veux pouvoir un layout colonné de cette façon, il te faudra soit :
- utiliser des float ( un div en float right contenant tes blocs de droite)
- donner une taille fixe à ton conteneur ( bleu ).