Div of table uitdaging...
Ook ik prefereer Div's before Table's, alleen op wens na heb ik een zodanig ongemak dat een table me een snel oplossing biedt t.o.v een div.
Maar ook ik weet niet alles, ondanks een gedegen kennis van allerlei zaken kom ik nog niet tot een oplossing op wat ik perse wil bereiken.
Het gaat om het volgende, het betreft een header logo die zal bestaan uit drie delen welke aansluitend moeten zijn, waarbij de 2de in theorie tot het on eindige zou mogen rekken, kortom:
[div 1, fixed size] [div 2, liquid size] [div 3, fixed size]
Ook indien als het browser venster zodanig klein wordt gemaakt, mogen ze niet onder elkaar komen te staan, ze moeten ten alle tijde horizontaal liggen
Tot nu toe kom ik steeds tot de conclusie dat het niet wil, maar ik hoop dat er misschien een methode is om dit toch te bereiken gezien ik tot zover mogelijk haalbaar de hele website in een div structuur wil presenteren.
Maar daar in tegen, had ik al lang klaar geweest als ik dit gedeelte met een table had gedaan.
Kortom wie weet raad?
Gewijzigd op 01/01/1970 01:00:00 door Danny Roelofs
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
53
54
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="author" content="Robert Deiman" />
<meta http-equiv="charset" content="iso-8859-1" />
<meta http-equiv="content-language" content="nl" />
<meta name="title" content="Vul hier de titel van je pagina in" />
<meta name="description" content="Vul hier een omschrijving van de website in " />
<meta name="keywords" content="Vul hier je keywords in" />
<meta name="generator" content="phpDesigner 2007 Pro" />
<title>..::.. Vul titel van je pagina in ..::..</title>
<style type="text/css">
body, html{
width:100%;
margin:0px;
padding:0px;
}
#left{
position:absolute;
width:300px;
top:0px;
left:0px;
background-color:#cccccc;
height:400px;
}
#middle{
position:absolute;
top:0px;
left:300px;
right:300px;
background-color:#ccccff;
height:400px;
}
#right{
position:absolute;
width:300px;
top:0px;
right:0px;
background-color:#ffcccc;
height:400px;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="author" content="Robert Deiman" />
<meta http-equiv="charset" content="iso-8859-1" />
<meta http-equiv="content-language" content="nl" />
<meta name="title" content="Vul hier de titel van je pagina in" />
<meta name="description" content="Vul hier een omschrijving van de website in " />
<meta name="keywords" content="Vul hier je keywords in" />
<meta name="generator" content="phpDesigner 2007 Pro" />
<title>..::.. Vul titel van je pagina in ..::..</title>
<style type="text/css">
body, html{
width:100%;
margin:0px;
padding:0px;
}
#left{
position:absolute;
width:300px;
top:0px;
left:0px;
background-color:#cccccc;
height:400px;
}
#middle{
position:absolute;
top:0px;
left:300px;
right:300px;
background-color:#ccccff;
height:400px;
}
#right{
position:absolute;
width:300px;
top:0px;
right:0px;
background-color:#ffcccc;
height:400px;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</body>
</html>
Bedankt!.
De hoogte van de divs is volgens het voorbeeld van Robert nu vastgezet op 400px en ik zie nergens een overflow gedefinieerd. Wat nu als er meer content in je div komt?
Dus de divs die naast elkaar staan moet de hoogte overnemen van de grootste (welke dat dan ook is!)