Hallo,
Ik probeer een erg simpele opbouw voor m'n site in CSS te realiseren middels div tags, i.p.v. de bekende tabellen. Het ontwerp is als volgt: Eerst een header. Daar onder een linker balk. Aan de rechterkant van deze balk komt de content. En daaronder de footer. Deze divs worden vervolgens bij elkaar gestopt in een container div die de hele boel centreert.
Nu werkt het in alle browsers prima... Behalve in IE. (Ik test in 6.0)
Dankzij de "text-align:" hack toe te passen ben ik al een heel eind gekomen, maar helaas: de content div wordt onder de left div geplaatst, terwijl deze er dus naast moet komen. Heeft iemand een idee wat ik hier fout doe? Ofwel, hoe krijg ik in hemelsnaam de content aan de rechterkant van de left div in IE?
De code heb ik zo simpel mogelijk gehouden:
Ik probeer een erg simpele opbouw voor m'n site in CSS te realiseren middels div tags, i.p.v. de bekende tabellen. Het ontwerp is als volgt: Eerst een header. Daar onder een linker balk. Aan de rechterkant van deze balk komt de content. En daaronder de footer. Deze divs worden vervolgens bij elkaar gestopt in een container div die de hele boel centreert.
Nu werkt het in alle browsers prima... Behalve in IE. (Ik test in 6.0)
Dankzij de "text-align:" hack toe te passen ben ik al een heel eind gekomen, maar helaas: de content div wordt onder de left div geplaatst, terwijl deze er dus naast moet komen. Heeft iemand een idee wat ik hier fout doe? Ofwel, hoe krijg ik in hemelsnaam de content aan de rechterkant van de left div in IE?
De code heb ik zo simpel mogelijk gehouden:
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
| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>TEST</title>
<style type="text/css">
<!--
body {
text-align: center;
margin: 0px 0px 0px 0px;
}
#container {
border: 1px solid #000;
width: 800px;
margin: 0 auto;
}
#header {
text-align: left;
background: #0f0;
width: 800px;
height: 100px;
}
#leftcol {
text-align: left;
background: #f00;
width: 150px;
height: 500px;
float: left;
}
#content {
text-align: left;
background: #fff;
width: 650px;
height: 500px;
float: left;
}
#footer {
text-align: left;
background: #0f0;
width: 800px;
height: 100px;
clear: left;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="content">Content Section</div>
<div id="footer">Footer Section</div>
</div>
</body>
</html> |
:strip_exif()/u/27216/bosmonster_dropdown.gif?f=community)
/u/67017/icon6.png?f=community)