Problèmes Parallax et hauteur des div

Bonjour à toutes et à tous,

Je vous expose mon problème. J'essaye de faire un site utilisant l'effet parallax.
J'ai mis à cette adresse
http://www.steak-design.com/test-spa
la page qui sera celle du site.
Mes problèmes sont les suivants:
- j'aimerai que la hauteur de chaque DIV recueillant les différentes rubriques s'adaptent à son contenu. Pour le moment je n'y arrive pas. Si pour un écran ayant une résolution de 1920x1200 cela ne pose pas de problème, pour un écran de portable 15' plus limité en hauteur, cela me cache une partie du contenu du premier calque par exemple (celui avec l'image de bambou en fond).
- mon second problème concerne les bulles qui apparaissent dans le deuxième calque (celui sur fond bleu). J'aimerai que certaines bulles soient au premier plan, donc arrivent par dessus le texte et d'autres s'affichent sous le texte. J'imagine que je dois jouer avec le z-index de certains éléments mais même en mettant un z-index de 9999999999999 au div contenant le texte, celui-ci s'affiche toujours sous ces bulles.

Je précise que les différents graphismes sont là seulement pour le test et qu'ils seront modifiés à l'exception du menu (même s'il faut que j'y ajoute un logo et quelques élements) qui devrait garder son aspect. Les polices utilisées sont également là à titre provisoire et seront également modifiées.

En espérant être clair dans la description de mon problème.
Je vous remercie par avance de tous les éclairages ou, soyons fous et optimistes, des solutions que vous pourriez m'apporter.

Stéfan

Ci-dessous le code qui gère les div dans lesquels sont présents les textes de chaque rubrique. Si vous avez besoin d'autres éléments, je les ajouterai dans de prochains messages.

#contenu3 {
				width:680px;
				margin-left:400px;
				padding-top:100px;
				min-height:100%;}

et la classe qui gère les fonds (à l'exception de la couleur et/ou de l'image de fond) de chacune des rubriques

.slide{
	background-attachment: fixed;
	width:100%;
	height:100%;
	position: relative;
	box-shadow:inset 0px 10px 10px rgba(0,0,0,0.3);
}

Bon, ben à force de chercher et tester, je pense avoir trouver une solution*.

le style de .slide (qui affiche le fond de chaque rubrique) est maintenant le suivant:

.slide{
	background-attachment: fixed;
	background-repeat:no-repeat;
	width:100%;
	height:auto;
	min-height:100%;
	padding-bottom:50px;
	position: relative;
	box-shadow:inset 0px 10px 10px rgba(0,0,0,0.3);
}

celui du div contenant les différents textes est maintenant:

#contenu3{
				width:680px;
				margin-left:400px;
				padding-top:100px;
				padding-bottom:50px;
				position:relative;}

*Je précise bien "une" solution et non pas "la" solution car je ne suis pas sûr qu'elle fonctionne sur toutes les résolutions d'écran.
Elle fonctionne sur un portable 15', sur un portable 17' aux résolutions d'écran différentes. Je la testerai dans la soirée sur un écran 24' afin d'en savoir plus.