Ik zit met iets waar ik maar geen oplossing voor kan vinden. Ik zit met het probleem dat ik in een container 2 divs heb staan, 1 links voor de navigatie, en de rechtse voor de content. zodra de content vult wil de linker div niet verticaal mee stretchen , getest in IE7 , daar werkt het wel. Ik heb al zitten vogelen in de css door html en body height 100% te geven en dan de linker div ook height 100% maar dat wil niet lukken. Ik hoop dat jullie mij kunnen helpen.
CSS
index.html
div id Block_1 moet dus verticaal meerekken met div id block_2 als die door content verticaal langer wordt.
CSS
Cascading Stylesheet:
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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
| body { height:100%; background-image: url(images/bg.jpg); background-repeat: repeat; } html { height: 100%; } A:Link{text-decoration: none;color: #000000;} A:visited {text-decoration: none;color: #000000;} #head { background: url('images/logo1.png'); padding:0px; height:150px; width:1000px; margin-left: auto; margin-right: auto; margin-bottom: 5px; } #container { background: url('images/bg1.png'); width:1000px; margin-left:auto; margin-right:auto; border: 1px solid black; } #bovenkop { background: url('images/bg1.png'); width:1000px; margin-left:auto; margin-right:auto; border-bottom: 1px solid black; } #block_1 { background-color: #99CC33; float: left; width: 175px; border-right: 1px solid #000000; height:; } * html #block_1 { display: inline; } #block_2 { margin: 5px 5px 5px 5px; float: right; width: 600px; font-family: verdana; font-size:12px; } /* Start Mac IE5 filter \*/ #block_1, #block_2 { #padding-bottom: 32767px !important; #margin-bottom: -32767px !important; } /* End Mac IE5 filter */ #wrapper { width: 800px; overflow: hidden; /* This hides the excess padding in non-IE browsers */ } /* we need this for IE 5.01 - otherwise the wrapper does not expand to the necessary height (unless fixed, this problem becomes even more acute weirdness as the method is enhanced */ #wrapper { /* Normally a Holly-style hack height: 1% would suffice but that causes IE 5.01 to completely collapse the wrapper - instead we float it */ float: left; /* NB. possibly only IE 5.01 needs to get this float value - otherwise 5.5 sometimes (I saw it happen many moons ago) makes the width of wrapper too small the float: none with the comment is ignored by 5.01, 5.5 and above see it and carry on about their business It's probably fine to just remove it, but it's left here just in case that many moons ago problem rears its head again */ float/**/: none; } /* easy clearing */ #wrapper:after { content: '[DO NOT LEAVE IT IS NOT REAL]'; display: block; height: 0; clear: both; visibility: hidden; } #wrapper { display: inline-block; } /*\*/ #wrapper { display: block; } /* end easy clearing */ #footer { clear: both; } #header, #footer { width: 800px; } /* Safari needs this - otherwise the ghost overflow, though painted correctly obscures links and form elements that by rights should be above it. An unintended side-effect is that it cause such elements to vanish in IE 5.01 and 5.5, hence the child selector hack */ * > #footer, * > form, * > #notes, * > .output { position: relative; z-index: 1000; } #klein_text_l { width:169px; padding:3px; padding-top:15px; padding-bottom:15px; color: #efefef; font-weight:bold; font-size:10px; font-family: verdana; } #klein_text { width:169px; padding:3px; padding-top:15px; padding-bottom:15px; } #k_head { background: url('images/bg31.png'); height:25px; width:100%; color: #2D2D2D; font-weight:bold; font-size:10px; font-family: verdana; text-align:center; line-height:14pt; } /* Fix's #container not clearing inner floats in firefox */ .floatfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* Hides from IE-mac \*/ * html .floatfix { height: 1%; } /* End hide from IE-mac */[ |
index.html
HTML:
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
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <TITLE> test </TITLE> <META NAME="Author" CONTENT="pietfriet"> <META NAME="Keywords" CONTENT="Test "> <META NAME="Description" CONTENT="Tandart"> <link rel="stylesheet" type="text/css" href="2style.css"> <!--[if lte IE 6]> <style type="text/css"> /* ie png hack */ /* special thanks to Christopher Walker (http://tibetanportal.com/) for his contribution */ #container { background-image: none ; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='images/bg2.png', sizingMethod=scale); } #block_1 { background-image: none ; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='images/bg2.png', sizingMethod=scale); } #block_2_1 { background-image: none ; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='images/bg2.png', sizingMethod=scale); } #k_head { background-image: none ; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='images/bg3.png', sizingMethod=scale); } </style> <![endif]--> <style type="text/css"> <!-- .style3 {color: #000000; font-size: large; font-weight: bold; } .style14 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; onmouseover="underline";} --> </style> </HEAD> <BODY> <div id="head"></div> <div id="container"><div id="bovenkop"><TABLE width="1000px"> <TR bordercolor="#000000"> <TD><div align="center" class="style14">test</div></TD> <TD><div align="center" class="style14">test</div></TD> <TD><div align="center" class="style14">test</div></TD> <TD><div align="center" class="style14">test</div></TD> <TD><div align="center" class="style14">Nieuws</div></TD> <TD><div align="center" class="style14">test</div></TD> <TD><div align="center" class="style14">test</div></TD> <TD><div align="center" class="style14">test</div></TD> <TD><div align="center" class="style14">test</div></TD> </TR> </TABLE> </div> <div id="wrapper"> <div id="block_1"> <div id="k_head"><em>test</em></div> <div id="klein_text_l"> </div> <div id="k_head">test</div> <div id="klein_text_l"> <center> </center> </div> <div id="k_head">test</div> <div id="klein_text_l"> <p align="left" class="style3">bla</p> <p align="left" class="style3">bla</p> <p align="left" class="style3">bla</p> <p align="left" class="style3">bla</p> <p align="left" class="style3">bla<span class="style6"></span></p> </div> </div> <div id="block_2"> <div id="block_2_1"> <p align="left" class="style3">Bla</p> <p align="left" class="style3">bla</p> <p align="left" class="style3">bla</p> <p align="left" class="style3">bla</p> <p align="left" class="style3">bla</p> <p align="left" class="style3">bla</p> <p align="left" class="style3">bla<span class="style6"></span></p> <p align="left" class="style3">bla</p> <p align="left" class="style3">bla</p> <p align="left" class="style3">bla</p> <p align="left" class="style3">bla</p> <p align="left" class="style3">bla<span class="style6"></span>bla</p> <p align="left" class="style3">bla</p> <p align="left" class="style3">bla</p> <p align="left" class="style3">bla</p> <p align="left" class="style3">bla<span class="style6"></span></p> </div> </div> </div> </BODY> </HTML> |
div id Block_1 moet dus verticaal meerekken met div id block_2 als die door content verticaal langer wordt.
:strip_exif()/u/176601/3D-Austria.gif?f=community)