Taille automatique d'une DIV [Résolu]

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

31/01/2011, 19h10	#3
polymorphisme Modérateur Grégory Roche GED (Gestion Electronique de Documentation) Inscription : octobre 2009 Messages : 1 067 Détails du profil Informations personnelles : Nom : Grégory Roche Âge : 38 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : GED (Gestion Electronique de Documentation) Informations forums : Inscription : octobre 2009 Messages : 1 067 Points : 1 445 Points : 1 445	Bonjour akrogames, tu peux aussi utiliser des unités relatives : %, em. __________________ polymorphisme.com Article : Installation de Cocoon Je ne réponds pas aux MP à caractère technique.
	00

31/01/2011, 18h25	#2
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 930 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 930 Points : 4 744 Points : 4 744	Bonjour, ne spécifies pas de height pour l'élément que tu veux voir s'adapter à son contenu.
	00

31/01/2011, 19h41	#4
akrogames Membre régulier Inscription : août 2005 Messages : 342 Détails du profil Informations forums : Inscription : août 2005 Messages : 342 Points : 76 Points : 76	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
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email