Hallo,
Deze vraag lijkt redelijk basic, maar ook na zoeken op internet kan ik geen goede oplossing vinden. Ik wil een pagina met drie kolommen naast elkaar maken. De breedte van de totale pagina moet onder de 800px blijven en als de gebruiker een hogere resolutie heeft moet de pagina gecentreerd in de browser worden getoond. Ik krijg het echter niet voor elkaar om de rechterkolom naast de andere twee te krijgen. Hij blijft er onder komen (IE 6 voor de rest nog niet in andere browsers getest), wat ik ook probeer.
Ik heb wel verschillende oplossingen gevonden, maar die werken met percentages of absolute positionering. Ik wil echter binnen de DIV met de id 'container' mijn pagina vrij op kunnen maken. Ik heb de volgende opzet, waarbij dus steeds de rechterkolom onder de andere twee komt. Iemand die me even kan helpen?
Deze vraag lijkt redelijk basic, maar ook na zoeken op internet kan ik geen goede oplossing vinden. Ik wil een pagina met drie kolommen naast elkaar maken. De breedte van de totale pagina moet onder de 800px blijven en als de gebruiker een hogere resolutie heeft moet de pagina gecentreerd in de browser worden getoond. Ik krijg het echter niet voor elkaar om de rechterkolom naast de andere twee te krijgen. Hij blijft er onder komen (IE 6 voor de rest nog niet in andere browsers getest), wat ik ook probeer.
Ik heb wel verschillende oplossingen gevonden, maar die werken met percentages of absolute positionering. Ik wil echter binnen de DIV met de id 'container' mijn pagina vrij op kunnen maken. Ik heb de volgende opzet, waarbij dus steeds de rechterkolom onder de andere twee komt. Iemand die me even kan helpen?
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
| <style type="text/css">
html,body {
margin:0;
padding:2px;
}
#container {
margin:0 auto;
width:780px;
text-align:center;
}
#links {
float:left;
width:210px;
position:relative;
left:2px;
top:2px;
}
#midden {
position:relative;
width:200px;
margin-left:212px;
margin-right:212px;
}
#rechts {
float:right;
width:210px;
position:relative;
right:2px;
top:2px;
}
#header {
width:780px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="links">
[img]"afbeeldingen/1.jpg"[/img]
</div>
<div id="midden">
<h1>Hier een kop</h1><br />
Hier het een en ander aan tekst... Hier het een en ander aan tekst... Hier het een en ander aan tekst... Hier het een en ander aan tekst... Hier het een en ander aan tekst... Hier het een en ander aan tekst... Hier het een en ander aan tekst...
</div>
<div id="rechts">
[img]"afbeeldingen/2.jpg"[/img]
</div>
</div>
<br />
<hr color="#000000" />
</div>
</body>
</html> |
:strip_exif()/u/50656/andre-scholten-avatar.gif?f=community){kind=avatar}
:strip_icc():strip_exif()/u/90747/vogelklein.jpg?f=community)
. De truc is (waarschijnlijk) de #midden div als láátste in je HTML te zetten