[CSS] Elements flottants et taille de l'élément parent

**Blustuff** · 28/07/2006, 01h17

Bonsoir,

Le but du jeu est de placer deux divisions l'une à coté de l'autre. L'une des deux divisions a une hauteur déterminée par son contenu. (height: auto) La seconde doit avoir exactement la même hauteur.

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
35
36
37
38
39
40
41
42
43
44
45
46
<html>
	<head>
		<style>
 
#Conteneur
{
	border: 1px solid grey;
	background-color: lightgrey;
	width: 1008px;
	padding: 2px;
}
 
#DivisionPrimaire
{
	border: 1px solid green;
	background-color: lightgreen;
	width: 700px;
}
 
#DivisionSecondaire
{
	border: 1px solid blue;
	background-color: lightblue;
	float: right;
	width: 300px;
	height: 100%;
}
 
		</style>
	</head>
	<body>
		<div id="Conteneur">
			<div id="DivisionSecondaire">
				<p>Contenu beaucoup plus court.</p>
			</div>
			<div id="DivisionPrimaire">
				<p>Du texte de longueur variable<br />
				   possiblement très long.<br />
				   Ce qui serait pas mal c'est que<br />
				   La division de droite suive la taille<br />
				   du texte.<br /></p>
			</div>
 
		</div>
	</body>
</html>

J'ai testé avec width: 100%. Mais les 100% sont en proportion de la page, et non du parent. Autre problème encore, si les deux divisions sont flottantes, alors la taille de l'élément parent est nulle. (Ce qui est effectivement spécifié par le w3c)

Alors... comment résoudre le problème ? C'est une question indispensable pour que l'on puisse clamer que les tableaux ne sont plus indispensable à la présentation.

**navis84** · 28/07/2006, 08h54

Bonjour,

Tout ce joue grâce à un pied de page qui se situe en bas des 2 blocs.
On met dans ce pied de page la propriété :

Code :

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

clear: both

**Blustuff** · 28/07/2006, 14h51

Merci, mais il me semble qu'il y a un décalage entre la réponse et la question. La deuxième division flottante ne prends pas la hauteur de la première division. C'est pas contre le cas dans les exemples avec positionnement absolu.

**Blustuff** · 28/07/2006, 16h31

Ah non, c'est faux, même avec position: absolute, on ne peut pas faire en sorte de "copier" la hauteur d'une colonne voisine... D'autres idées ?

[CSS] Elements flottants et taille de l'élément parent

CSS

Discussions similaires

Partager

Partager