Taille automatique d'une DIV

**akrogames** · 31/01/2011, 00h02

Bonjour,

J'ai des deux DIV l'une dans l'autre et la taille de ma première DIV doit être dynamique par rapport à la seconde mais je n'y arrive pas... La div aux bordures rouge n'augmente pas sa taille en fonction de la div noir...
Vous allez mieux comprendre avec l'image...

Mon image :
http://img171.imageshack.us/i/divproblem.png/

Mon code HTML :

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
47
48
49
50
51
52
53
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
 
<link rel="stylesheet" type="text/css" media="screen,projection" href="/css/style.css"/>
 
<script type="text/javascript" src="/js/jquery.js"></script>
 
<?php echo $this->headTitle() ?>
<?php echo $this->headScript() ?>
<?php echo $this->headStyle() ?>
 
</head>
<body>
 
 
<div id="site">
 
	 <div id="header">
 
 
		<div id="citation">
			"TEST DE CITATION"
		</div>
 
	</div>
 
	<div id="barre-menu">
		<div id="menu">
 
		</div>
	</div>
 
	<div id="middle">
		<div id="corps">
			test
		</div>
		<!--<div id="barre-droite"></div>
		 <div id="menu-droit">
			 <img src="/img/imgsc/citoyen-partout.png" />
		</div>-->
 
 
	</div>
 
	<div id="footer">
 
	</div>
</div>

Mon CSS :

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
 
body {
	margin: auto;
	background-color: #ffdff6;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #6d6d6d;
}
/*
form {
	display: inline;
}
 
input {
	background-color: transparent;
}
*/
 
a:link     { color: #6d6d6d; }
a:visited  { color: #6d6d6d; }
a:hover    { color: #6d6d6d; }
a:focus    { color: #6d6d6d; }
a:active   { color: #6d6d6d; }
 
#site {
	position: absolute;
	display:block;
	width: 100%;
	background-color: #ffdff6;
	background-image: url('/img/imgsc/fond.jpg');
	background-repeat: repeat-x;
	background-position: top center;
}
 
#header {
	position: relative;
	height: 180px;
	width: 700px;
	margin-left: 520px;
	border: 1px solid red;	
}
 
#citation {
	position:relative;
	width:500px;	
	margin-left:10px;
	margin-top:100px;
	font-family: Verdana ,Arial, Helvetica, sans-serif;
	font-size: 16px;
	border: 1px solid blue;		
}
 
 
#barre-menu {
	position:relative;
	width:1000px;
	height: 42px;
 
	background-image: url('/img/imgsc/barre-menu.png');
	padding-top:20px;
	margin-left:220px;
	margin-top:5px;
	z-index: 10;
 
}
 
#menu {
	position:relative;
	width:929px;
	height: 25px;
	background-image: url('/img/imgsc/menu.png');
	z-index: 1;
	margin-left:20px;
 
}
 
#middle {
	position:relative;
 
	margin-left:220px;
	width:1000px;
	min-height:500px; 
    height:auto;
 
	background-color: #ffffff;
	background-image: url('/img/imgsc/contenu.png');
	background-repeat: repeat-x;
	background-position: top center;
 
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #6d6d6d;
	z-index: 1;
 
	border: 1px solid red;
}
 
#barre-droite {
	position:relative;
 
	margin-left:780px;
	margin-right: 200px;
 
	width:1px;
	height: 906px;
	background-color: #ffffff;
	background-image: url('/img/imgsc/barre-droite.png');
	background-repeat: repeat-x;
	background-position: bottom center;
	z-index: 1;
 
	border: 1px solid blue;
}
 
#menu-droit {
	position:relative;
	float: right;
 
	margin-left:801px;
	width: 190px;
 
	padding: 10px 10px 10px 10px;
	border: 1px solid red;
}
 
#corps {
	position:relative;
	float: left;
 
	width: 759px;
	padding: 10px 10px 10px 10px;
	border: 1px solid black;
}

J'ai besoin d'un petit coup de pouce les amis et merci d'avance.

Bonne soirée

**NoSmoking** · 31/01/2011, 18h25

Bonjour,
ne spécifies pas de height pour l'élément que tu veux voir s'adapter à son contenu.

**polymorphisme** · 31/01/2011, 19h10

Bonjour akrogames,

tu peux aussi utiliser des unités relatives : %, em.

**akrogames** · 31/01/2011, 19h41

Bonjour à vous !

Merci de votre aide. En réalité, il ne fallait pas spécifier de float:left;

Et si on veut vraiment faire flotter alors on doit utiliser clear:both.

A bientôt

Taille automatique d'une DIV

CSS

Discussions similaires

Partager

Partager