[CSS] Elements flottants et taille de l'élément parent
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:
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.
