CSS Responsive

Hoi Lezer!

Ik ben weer eens begonnen met wat kleine websites te maken alleen nu heb ik dit probleem:

Alleen, zie ik zelf mijn fout niet die ik heb gemaakt.
Dit is mijn css code:

Spoiler tonen

Codeblok (style.css):

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

#container {
position: relative;
width: 71%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}

/* Content Vak Links */

.klein_left {
width: 362;
overflow: hidden;
float: left;
}

#klein_top {
background-color: #3c94f7;
width: 352px;
height: 28px;
margin-top: 15px;
padding: 14px 8px 0px 8px;
font-weight: bold;
font-size: 13px;
color: #FFF;
border-top: 2px #FFF solid;
border-left: 2px #FFF solid;
border-right: 2px #FFF solid;
}

#klein_mid {
background-color: #FFF;
width: 362px;
overflow: hidden;
padding: 4px 3px 4px 3px;
border-bottom: 2px #FFF solid;
border-left: 2px #FFF solid;
border-right: 2px #FFF solid;
color: #6f6f6f;
margin-bottom: 15px;
}

/* Content vak Rechts */
.content {
width: 777;
overflow: hidden;
float: right;
}

#groot_top {
background-color: #23ae00;
width: 767px;
height: 28px;
margin-top: 15px;
padding: 14px 8px 0px 8px;
font-weight: bold;
font-size: 13px;
color: #FFF;
border-top: 2px #FFF solid;
border-left: 2px #FFF solid;
border-right: 2px #FFF solid;
}
#groot_mid {
background-color: #FFF;
width: 777px;
overflow: hidden;
overflow: hidden;
padding: 4px 3px 4px 3px;
border-bottom: 2px #FFF solid;
border-left: 2px #FFF solid;
border-right: 2px #FFF solid;
color: #6f6f6f;
margin-bottom: 15px;
}

Iemand die wel de fout ziet?

Gr,
Remon.

toevoeging op 31 maart 2015, 19:06:41:
Btw, op een groter scherm (Mijn pc scherm 21,5 inch) staat het wel goed. Alleen op een kleine scherm niet.

Wat gebeurt er als je het rechtse vak ook een float left geeft?

Dan staat die ook aan de linker kant onder het blauwe vakje en blijft die daar ook.

Werk anders hier mee: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Jornd schreef:

Werk anders hier mee: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Danku, ik heb dit inderdaad gebruikt en t werkt.
Topic kan dicht