Het volgende stukje code maakt een pagina waarin je een wit blok horizontaal gecentreerd ziet op een lichtgrijze achtergrond. So far so good. In dat blok staat linksboven een content blok en rechts ernaast een sidebar blok. Onder de twee blokken staat een footer blok. So far so good.
Deze handel is zonder margins, paddings en borders. Maar ik zou ze graag zien met margins, paddings en borders. Echter, zodra 1 van deze wordt toegevoegd aan de styles van #content, #sidebar of #footer, dan wordt de layout compleet overhoop gegooid.
Voornaamste probleem is dat de #main layer niet meer de complete hoogte van zijn inhoud aanneemt. Wat is hier aan te doen?
Het renderen in de verschillende browsers is ook verschillend. Internet Explorer op Windows heeft geen problemen met margins, paddings en borders met deze code. Mozilla en Safari wel. En het schijnt dat die laatste twee correct renderen.
Deze handel is zonder margins, paddings en borders. Maar ik zou ze graag zien met margins, paddings en borders. Echter, zodra 1 van deze wordt toegevoegd aan de styles van #content, #sidebar of #footer, dan wordt de layout compleet overhoop gegooid.
Voornaamste probleem is dat de #main layer niet meer de complete hoogte van zijn inhoud aanneemt. Wat is hier aan te doen?
Het renderen in de verschillende browsers is ook verschillend. Internet Explorer op Windows heeft geen problemen met margins, paddings en borders met deze code. Mozilla en Safari wel. En het schijnt dat die laatste twee correct renderen.
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
57
| <!doctype html public "-//w3c//dtd xhtml 1.1//en"
"http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>floating div test</title>
<style type="text/css">
body {
font-family : verdana;
font-size : 70%;
color : #000;
background-color : #eee;
}
#main {
margin-left : auto;
margin-right : auto;
margin-top : 20px;
margin-bottom : 20px;
padding : 10px;
width : 700px;
background-color : #fff;
border-color : #ccc;
border-style : solid;
border-width : 1px;
}
#content {
float : left;
width : 75%;
}
#sidebar {
float : left;
width : 25%;
}
#footer {
float : top;
}
</style>
</head>
<body>
<div id="main">
<div id="content">
<b>content area</b><br />
bunch of text here... bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</div>
<div id="sidebar">
<b>sidebar area</b><br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</div>
<div id="footer">
<b>footer area</b>
</div>
</div>
</body>
</html> |
[ specs ] [ Tweaker gallery ]
. Aangezien je dit zei:
XHTML/CSS is een vak apart als je er diep induikt.
Ha, maar dan zul je 't wel met me eens zijn...:strip_icc():strip_exif()/u/92296/sinister.jpg?f=community)