Hauteur d'une div float dans une div absolute

Bonsoir !

Voilà je me trouve confronté à un problème du à une imbrication assez particulière de plusieurs <div>.

La totalité de mon site est affichée sur une seule et unique page. Il y a quatre rubrique et une seule d'entre elles peut être visible à la fois. En cliquant sur un élément du menu, un slide horizontal s'effectue pour afficher la rubrique demandée.

J'utilise pour cela la librairie JQuery Tools. Malheureusement, il est nécessaire d'employer une imbrication très spéciale pour un tel effet et j'ai peur de ne pas pouvoir réaliser l'effet souhaité. Voici le lien du tutoriel suivi et que j'ai modifié à ma sauce : http://flowplayer.org/tools/demos/scrollable/index.html

Et voici un schéma de la situation citée précédemment :



A : il s'agit d'une <div> positionnée en "relative" :

#content {
	width: 824px;
	min-height: 219px;
	margin: 40px auto;
	position: relative;
	overflow: hidden;
}

B : il s'agit d'une <div> positionnée en "absolute" et d'une longueur extrême :

#content #items {
	width: 20000em;
	position: absolute;
}

C : il s'agit d'un <div> positionnée en "float: left" et d'une largeur égale à celle de la <div> A :

#items div {
	width: 824px;
	float: left;
	text-align: justify;
}

D : idem que la <div> C, elle se positionne juste à côté de cette dernière. Avec l'effet du slide, c'est elle qui va s'afficher au click sur "next" dans le menu.

E : Ce sont des <div> positionnées en "float: left" (chaque fois deux dans une div). Elle se nomment respectivement "summary" et "main-content"

#items .summary {
	width: 228px;
	min-height: 219px;
	padding-right: 41px;
	float: left;
	background: url(images/line.png) top right no-repeat;
}

#items .main-content {
	width: 535px;
	padding-left: 20px;
	float: left;
}

Ce sont ces deux dernières divs qui accueillent le contenu de chaque rubrique.
Tout va bien tant que je ne dépasse pas 219px de hauteur (min-height que j'ai déterminé pour la div A), cependant lorsque je vais plus loin la <div> "floattée" contenant le texte s'étend bel et bien, mais le reste ne suit pas (le contenu est caché car j'ai ajouté le propriété "overflow: hidden;" à la div A, propriété nécessaire pour le bon fonctionnement du système de slide horizontal).
Cependant le problème n'est pas là, je pense qu'il s'agit d'un fait d'avoir placé des <div> "floattées" dans une div "absolute". De ce fait, un simple "clear: both;" ne suffit pas...

Voici le code HTML pour finir :

<div id="content">
	<div id="items">
	
		<!-- Rubrique 1 -->
		<div id="home">
			<div class="summary">
				<p>Texte "Rubrique 1"</p>
			</div>
			<div class="main-content">
				<p>Encore du texte "Rubrique 1"</p>
			</div>
			<div class="clear-both"></div>
		</div>
		
		<!-- Rubrique 2 -->
		<div id="about-me">
			<div class="summary">
				<p>Texte "Rubrique 2"</p>
			</div>
			<div class="main-content">
				<p>Encore du texte "Rubrique 2"</p>
			</div>
			<div class="clear-both"></div>
		</div>
	
	</div>
</div>

La classe "clear-both" parle d'elle-même !

J'éspère qu'une solution existe ! Merci d'avance !
Modifié par Maliki (17 Jan 2011 - 23:51)

Je n'ai pas tout compris... tu as un lien vers ta page ?
Si tu mets tout ton site sur la même page, tu peux aussi opter pour une solution avec des onglets, ou utiliser un autre slide plus adapté que celui que tu montre en exemple et qui oblige, si je ne me trompe pas à faire défiler tout ton contenu pour savoir ce qu'il y a sur ton site.

Bonsoir !

Pour ce qui est de montrer le site, je ne peux pas je travaille en local actuellement et n'ai pas d'hébergeur.

Concernant le système de slide ne t'en fais pas on parvient très rapidement à la dernière rubrique (la plus à droite) car j'ai réglé le défilement sur une vitesse relativement rapide.

Dans tous les cas, pour simplifier mon problème (je l'ai mal exposé c'est vrai...), je voulais savoir la chose suivante :

Est-il possible de faire en sorte que la hauteur d'une div positionnée en "relative" (donc dans le flux) s'agrandisse automatiquement en hauteur (elle n'a pas de hauteur fixe, juste une valeur spécifiée en "min-height") en fonction du contenu d'une div "floattée" (jusque-là oui avec un "clear-both" bien placé), sachant que cette div "floattée" est auparavant placée dans une div positionnée en "absolute" (c'est là que ça coince je pense...)

En gros, y a-t-il un équivalent du "clear-both" pour les div positionnée en "absolute" ?

HTML :

<div id="relative">
	<div id="absolute">
		<div class="float">Contenu textuel de la rubrique 1.</div>
		<div class="float">Contenu textuel de la rubrique 2.</div>
		<div class="float">Contenu textuel de la rubrique 3.</div>
		<div class="float">Contenu textuel de la rubrique 4.</div>
	</div>
</div>

CSS :

#relative {
	width: 824px;
	min-height: 219px;
	margin: 60px auto;
	position: relative;
	overflow: hidden;
}

#absolute {
	width: 20000em;
	position: absolute;
}

.float {
	width: 824px;
	float: left;
}

overflow : hidden sur la div en absolute ?
Mais je ne pense pas.
tu tiens à ce que les div slident horizontalement ?
Sinon jquery qui mesure la hauteur de la div à afficher et qui modifier la taille du conteneur
Modifié par joska (20 Jan 2011 - 00:17)