Remplir une div float

Version imprimable

05/05/2012, 11h02
kataboy

Remplir une div float

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.
05/05/2012, 11h36
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.

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:

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

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:

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:

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

chaque box à insérer
par :

Code:

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

Avec :

Code:

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:

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>

05/05/2012, 12h58
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 !

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

Avec affiche-box-gauche.php :
Code:

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:

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...

05/05/2012, 13h08
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.