Discussion :

[kataboy]

Bonjour a tous,

Voila mon probleme. Je dipose de la construction suivante:
- 1 div containeur dans laquelle se trouve 3 div flottantes:
- a gauche: un ensemble de div les une sur les autres.
- au centre: un texte de taille variable
- a droite: un ensemble de div les une sur les autres.
(J'ai également une 4eme div en clear:both.)

La div du centre est celle qui determine la taille totale du container puisque sa hauteur varie. J'aimerais que le contenu des div droite et gauche soit de la meme hauteur que le div du centre.

Pour etre plus clair, si la div du centre représente une taille equivalente a 3 "sous div" de la div de gauche, alors j'affiche 3 "sous div".

merci de votre aide.

[Invité]

Bonjour,
il serait intéressant que tu montres ton code :
- html (simplifié) : imbrication des div
- CSS associé
ainsi qu'une "image" de ce que tu souhaites obtenir.

Par ex., s'il s'agit de couleurs ou d'images de background, plusieurs solutions peuvent être envisageables.

[kataboy]

merci de ta réponse.
Non, ce n'est pas de background ou de couleur de fond dont je parle mais bien du contenu des div gauche et droite (cf cidessous).

Voile code ultra simplifié:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
<div style="display:block">
	<div style="float:left;width:259px" id="gauche">
		<!-- nombre de div variable (en fonction de la div centrale)-->
		<div>bla bla</div>
		<div>bla bla2</div>
		<div>bla bla3</div>
 
	</div>
 
	<div id="centre" style="float:left;width:400px">
		<!-- texte de taille variable-->
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quam risus, molestie at mollis pellentesque, pretium id felis. Duis est urna, condimentum eget ornare nec, ultricies ut ante. Donec tempus adipiscing felis, sit amet lobortis augue ultrices ut.
 
		Sed imperdiet venenatis odio. Morbi dignissim congue lorem et rhoncus. Vivamus convallis vulputate aliquet. In hac habitasse platea dictumst. Morbi commodo, nisi vitae vulputate lacinia, ligula orci malesuada ligula, vitae malesuada sem dolor sed dui. Sed malesuada eros vitae quam fermentum tempor. Maecenas gravida, diam ut mollis ullamcorper, neque quam tincidunt arcu, nec dictum libero risus sed diam. Vivamus tortor ligula, scelerisque at mattis adipiscing, ultricies sodales justo. Aliquam laoreet tempor tempus. Ut dapibus convallis velit, ac mattis orci ornare ac.
 
 
	</div>
 
	<div id="droite" style="float:left;width:259px">
		<!-- nombre de div variable-->
		<div>bla bla</div>
		<div>bla bla2</div>
		<div>bla bla3</div>
 
	</div>
 
	<div style="clear:both">
 
 
	</div>
 
 
</div>

L'idée est d'ajouter autant de div possible dans les div gauche et droite et ceci, en fonction de la taille de la div centrale.

Je sais pas si ca aide mais la hauteur des divs inclus dans les div gauche et droite est connu, fixe et identique à toute ses div.

merci

[Invité]

Si je comprends bien ta problématique :
1/ affichage de la page
2/ => il faut passer par JavaScript pour calculer la hauteur du div central (#centre) : donc, coté client
3/ à partir de cette valeur, déterminer le nombre de div à afficher de chaque coté
4/ afficher le nombre de div correct : suppose un appel php ? (donc coté serveur)

Je dirais donc : JavaScript + Ajax

Un début de script (javascript/jQuery) :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!-- Script initialisation jquery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
		var Hcentre = $('#centre').height(); // hauteur du contenu central
		var Hdivbox = $('.divbox').height(); // hauteur connue et FIXE de chaque box à insérer
		var nombrebox = Math.floor(Hcentre/Hdivbox);
		alert('on peut afficher : ('+Hcentre+' / '+Hdivbox+') = '+nombrebox+' box');
			var texthtml = '';
			// affichage des box dans div gauche
			$.ajax({	// Ajax avec Jquery
			 type: 'POST',
			 url: 'affiche-box-gauche.php',
			 data: "nbrebox="+nombrebox,
			 dataType: 'html',
			 cache: false,
			 success: function(texthtml) {
				$('#gauche').html(texthtml);
				return false;
			 }
			});
			// affichage des box dans div droite
			$.ajax({	// Ajax avec Jquery
			 type: 'POST',
			 url: 'affiche-box-droite.php',
			 data: "nbrebox="+nombrebox,
			 dataType: 'html',
			 cache: false,
			 success: function(texthtml) {
				$('#droite').html(texthtml);
				return false;
			 }
			});
});
</script>

remarque :
- il faut afficher au moins une box ('.divbox') à l'ouverture de la page);
- les autres seront à afficher via Ajax (une fois le nombre de box calculé)
Sinon, remplacer :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

		var Hdivbox = $('.divbox').height(); // hauteur connue et FIXE de

chaque box à insérer
par :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

		var Hdivbox = 80; // hauteur connue et FIXE de chaque box à insérer

Avec :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style type="text/css">
.divbox { 
	display:block; 
	width:100%;
	height:80px; /* HAUTEUR CONNUE ET FIXE */
 
	background:green; /* pour test */
}
#centre {
	float:left;
	width:400px;
 
	background:yellow; /* pour test */
}
</style>

et :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div style="display:block">
	<div style="float:left;width:259px" id="gauche">
		<!-- nombre de div variable (en fonction de la div centrale)-->
		<div class="divbox">bla bla</div>
 
	</div>
 
	<div id="centre" style="float:left;width:400px">
		<!-- texte de taille variable-->
		<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quam risus, molestie at mollis pellentesque, pretium id felis. Duis est urna, condimentum eget ornare nec, ultricies ut ante. Donec tempus adipiscing felis, sit amet lobortis augue ultrices ut.
		</p>
 		<p>
		Sed imperdiet venenatis odio. Morbi dignissim congue lorem et rhoncus. Vivamus convallis vulputate aliquet. In hac habitasse platea dictumst. Morbi commodo, nisi vitae vulputate lacinia, ligula orci malesuada ligula, vitae malesuada sem dolor sed dui. Sed malesuada eros vitae quam fermentum tempor. 
		</p>
 		<p>
		Maecenas gravida, diam ut mollis ullamcorper, neque quam tincidunt arcu, nec dictum libero risus sed diam. Vivamus tortor ligula, scelerisque at mattis adipiscing, ultricies sodales justo. Aliquam laoreet tempor tempus. Ut dapibus convallis velit, ac mattis orci ornare ac.
		</p>
	</div>
 
	<div id="droite" style="float:left;width:259px">
		<!-- nombre de div variable-->
		<div class="divbox">bla bla</div>
	</div>
 
	<div style="clear:both">
		[...] (footer)
	</div>
</div>

[kataboy]

J'avais essayé de récupérer la valeur de la div avec jquery mais j'ai du me tromper quelque part car ca ne marchait pas.
Grace a ta solution, je récupère bien les infos souhaités. Pour l'appel ajax, je peux gérer seul.

merci beaucoup pour ta réponse précise et rapide !

[Invité]

J'ai mis à jour mon script précédent (script ajax ajouté)

Avec affiche-box-gauche.php :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<?php
for ($i=1; $i<=$_POST['nbrebox']; $i++){
?>
		<div class="divbox" id="divbox-gauche<?php echo $i; ?>">bla bla gauche <?php echo $i; ?></div>
<?php
}
?>

et affiche-box-droite.php :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<?php
for ($i=1; $i<=$_POST['nbrebox']; $i++){
?>
		<div class="divbox" id="divbox-droite<?php echo $i; ?>">bla bla droite <?php echo $i; ?></div>
<?php
}
?>

A toi de les adapter, bien sûr...

[Invité]

REMARQUE IMPORTANTE :
attention aux margin, border sur les box : ils ne sont pas pris en compte dans le calcul
S'il y en a, il faudra les inclure dans le calcul.