container loopt niet door
Ik heb een een container en daar twee divjes in, maar de container loopt niet door, zie foto.
Hoe kan ik er voor zorgen dat ie wel door loopt? Want de div nieuws en sidebar moeten er in en footer moet er helemaal onder
http://img715.imageshack.us/img715/9926/59499254.jpg
CSS
Code (php)
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
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
div.container{
background-color: #101314;
margin-left: auto;
margin-right: auto;
margin-top: 486px;
padding-top: 10px;
min-height: 100px;
width: 1000px;
}
div.nieuws{
background-color: #FFFFFF;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
float: left;
width: 630px;
}
div.sidebar{
background-color: #FFFFFF;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
float: right;
width: 290px;
}
div.footer{
background-color: #000000;
margin-left: auto;
margin-right: auto;
padding-top: 10px;
width: 1000px;
}
background-color: #101314;
margin-left: auto;
margin-right: auto;
margin-top: 486px;
padding-top: 10px;
min-height: 100px;
width: 1000px;
}
div.nieuws{
background-color: #FFFFFF;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
float: left;
width: 630px;
}
div.sidebar{
background-color: #FFFFFF;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
float: right;
width: 290px;
}
div.footer{
background-color: #000000;
margin-left: auto;
margin-right: auto;
padding-top: 10px;
width: 1000px;
}
HTML:
Kijk anders hierna. misschien zit hier iets tussen; http://www.gigadesign.be/2006/07/layout-met-100-hoogte/
Gewijzigd op 23/07/2011 20:34:35 door John Acid
overflow: auto;
Bedankt! Het is gelukt!
Hoe heb je het opgelost?
Toevoeging op 24/07/2011 16:15:44:
Ik heb nog iets :$
Ik heb verschillende stekst boxjes maar ze lopen niet onder elkaar
http://img813.imageshack.us/img813/1324/vraag.jpg
Dus div.content moet links staan (onder elkaar doorlopen) en div.sidebar moet rechts staan (onder elkaar doorlopen)
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<div class="container">
<div class="content"><h1>Nieuws</h1></div>
<div class="sidebar">Tekst</div>
<div class="content">Tekst</div>
<div class="sidebar"><h1>Chat</h1><br>Tekst</div>
</div>
<div class="content"><h1>Nieuws</h1></div>
<div class="sidebar">Tekst</div>
<div class="content">Tekst</div>
<div class="sidebar"><h1>Chat</h1><br>Tekst</div>
</div>
CSS:
Code (php)
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
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
div.content{
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
width: 610px;
float: left;
overflow: auto;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background: #FFFFFF;
behavior: url(/PIE.htc);
}
div.sidebar{
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
width: 310px;
float: right;
overflow: auto;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background: #FFFFFF;
behavior: url(/PIE.htc);
}
div.container{
margin-left: auto;
margin-right: auto;
margin-top: 486px;
padding-top: 10px;
min-height: 100px;
overflow: auto;
width: 1000px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background: #101314;
behavior: url(/PIE.htc);
}
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
width: 610px;
float: left;
overflow: auto;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background: #FFFFFF;
behavior: url(/PIE.htc);
}
div.sidebar{
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
width: 310px;
float: right;
overflow: auto;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background: #FFFFFF;
behavior: url(/PIE.htc);
}
div.container{
margin-left: auto;
margin-right: auto;
margin-top: 486px;
padding-top: 10px;
min-height: 100px;
overflow: auto;
width: 1000px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background: #101314;
behavior: url(/PIE.htc);
}
Je moet dan die 2 blokken aan de linkerkant in een aparte container zetten, bijvoorbeeld container_left en de 2 blokken aan de rechterkant zet je ook in een aparte container, bijvoorbeeld container_right. Deze beide containers geef je dan de juiste breedte width: 610px; en width: 310px; en allebei een float: left; zodat ze naast elkaar komen staan.
Toevoeging op 24/07/2011 16:48:42:
Alles is gelukt! jullie zijn super heel erg bedankt!!
graag gedaan :)
CSS code => http://www.plaatscode.be/141188/
Afbeelding => http://i54.tinypic.com/15wb61z.png
Alvast bedankt,
GerrieOnline
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
.main:after {
content: ".";
display: block;
clear: both;
height: 0;
overflow: hidden;
}
content: ".";
display: block;
clear: both;
height: 0;
overflow: hidden;
}
Een container om .menu en .content zetten met class main en deze css in je css zetten.
Manier 2:
Een container om .menu en .content zetten en een overflow: hidden; mee geven
Manier 3 afrader:
een div achter .content zetten met een clear: both;
Gewijzigd op 05/08/2011 00:03:38 door Joakim Broden
Nu ziet de site er beter uit
CSS Code:
.content:after {
content:".";
display:block;
clear:both;
height:0;
overflow:hidden;
}