Position:absolute fait sortir de la DIV

Version imprimable

1 pièce(s) jointe(s)

Développeuses/Développeurs Bonjour,

Je cherche à positionner la DIV verte en bas de la DIV flottante BLEU.
Je ne connais que POSITION: ABSOLUTE; BOTTOM:2px ... pour faire ceci.
Malheureusement, ca fait sortir la DIV verte de la bleu, en l occurrence le POSITION: ABSOLUTE est pris à partir du "bottom" de la page dans le browser, arbitrairement donc ...
Qq' un sait-il pourquoi ?

Voici le code complet avec CSS inclus.
Merci

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
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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 
 
<style>
 
 
html,body {
	margin:0;
	padding:0;
	border:0;
}
 
 
 
#container {
	width: 760px;
	margin: auto;
	padding: 0;
	border: 0;
}
 
#header {
	background: red;
	height: 50px;
	margin: 0 auto;
}
 
 
#language_bar {
	background: yellow;
	height: 15px;
}
 
#wrap {
	background: blue;
}
 
#menu {
	float: left;
	background: white;
	width: 150px;
	height: 2000px;
}
 
 
#content {
	float:left;
	background: orange;
	height: 2000px;
	width: 610px;
	overflow: hidden;
}
 
#footer {
	clear: both;
	background: yellow;
	height: 50px;
	margin: 0 auto;
}
 
#bleu {
	float:right;
	background: blue;
	height: 100px;
	width: 200px;
}
 
#vert {
	position: absolute;
	bottom: 2px;
	background: green;
	height: 30px;
	width: 70px;
}
 
</style>
 
 
</head>
<body>
 
<div id="container">
	<div id="header">
		Le header
	</div>
	<div id="language_bar">
		barre de langage
	</div>
 
	<div id="wrap">
 
		<div id="menu">
			Le menu
		</div>
		<div id="content">
 
		<div id="bleu">
			<div id="vert"> read more
			</div>
		</div>
		</div>
	</div>
	<div id="footer">
		Le footer
	</div>
</div>
 
 
</body>
</html>

06/07/2010, 20h19
devyan

Bonjour,

C'est par-ce que le DIV bleu est en "position:static".
Mets le en "position:relative" ainsi les éléments à l'intérieur l'utiliseront comme origine.

devyan
07/07/2010, 09h09
tsunamichups

Citation:

Envoyé par devyan

Bonjour,

C'est par-ce que le DIV bleu est en "position:static".
Mets le en "position:relative" ainsi les éléments à l'intérieur l'utiliseront comme origine.

devyan

J'ai pas vu de position static :roll:

nan plutôt que d'utiliser bottom qui te partir du bas de ta page utilise margin-bottom ou margin-top, qui lui te fera partir de ta position initiale (la place de la div verte a la base)
07/07/2010, 18h32
santaflam

Citation:

Envoyé par devyan

Bonjour,

C'est par-ce que le DIV bleu est en "position:static".
Mets le en "position:relative" ainsi les éléments à l'intérieur l'utiliseront comme origine.

devyan

Excellent! Merci !!

@ Tsunamichups :
Le static pour position est la valeur par défaut ...

Je n ai pas essayé ta méthode mais je pense que le placement par rapport à la position initiale, c est du tatonement. La méthode absolute c est direct et fiable.

Merci.
08/07/2010, 08h46
tsunamichups

Citation:

Envoyé par santaflam

Excellent! Merci !!

@ Tsunamichups :
Le static pour position est la valeur par défaut ...

Je n ai pas essayé ta méthode mais je pense que le placement par rapport à la position initiale, c est du tâtonnement. La méthode absolute c est direct et fiable.

Merci.

Je ne savais pas que la position static était la valeur par défault, je dormirais moins bête ce soir ^^

Citation:

Envoyé par tsunamichups

Je ne savais pas que la position static était la valeur par défault, je dormirais moins bête ce soir ^^

Moi non plus!

Intéressant aussi qu' un position:absolute se conjugue à un float.
Et il est hérité d une div parente. Exemple, si la div bleue elle même devait être positionnée dans la div content, faudrait faire :
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 #content { float:left; position: relative; background: orange; height: 2000px; width: 610px; overflow: hidden; } #bleu { position: absolute; bottom: 5px; right: 2px; background: blue; height: 100px; width: 200px; } #vert { position: absolute; bottom: 2px; right: 5px; background: green; height: 30px; width: 70px; }