Ik heb topics over footers en dergelijke zitten lezen, maar ik kan nog niet vinden wat ik wil. Wat ik wil is in principe heel simpel. Met tabellen zou ik het makkelijk voor elkaar kunnen krijgen, maar ik wil graag puur met CSS werken. In bijgevoegde code is te zien dat ik de onderste div (bottom) helemaal onderaan probeer te positioneren door deze simpelweg onder de div (middle) te zetten. In IE werkt dit prima en komt de div (bottom) inderdaad altijd netjes onder de div (middle te staan).
Als ik echter in FF/Opera test dan komt mijn div (bottom) bovenaan in de div (middle) te staan dwars door de content die zich in div (middle) bevindt. Ik kan div (bottom) wel verder naar onderen krijgen door div (middle) een height mee te geven. Dan komt de div (bottom) direct onder de opgegeven hoogte te staan. Je kunt het dan natuurlijk zo afpassen dat ie precies onder div (middle) terecht komt, maar veel van mijn pagina's hebben inhoud die uit een db komt waardoor de hoogte van div (middle) varieert. Een hoogte meegeven aan div (middle) is dus geen oplossing.
Is er een manier om te realiseren wat ik wil zonder een hoogte mee te geven aan div (middle). Let wel: ik wil dus niet dat div (bottom) precies onder in beeld komt of zo (wat veel anderen willen las ik in andere topics). div (bottom) moet ongeacht de hoogte van div (middle) gewoon altijd direct onder div (middle) komen.
Hier mijn (vereenvoudigde) codevoorbeeld:
Als ik echter in FF/Opera test dan komt mijn div (bottom) bovenaan in de div (middle) te staan dwars door de content die zich in div (middle) bevindt. Ik kan div (bottom) wel verder naar onderen krijgen door div (middle) een height mee te geven. Dan komt de div (bottom) direct onder de opgegeven hoogte te staan. Je kunt het dan natuurlijk zo afpassen dat ie precies onder div (middle) terecht komt, maar veel van mijn pagina's hebben inhoud die uit een db komt waardoor de hoogte van div (middle) varieert. Een hoogte meegeven aan div (middle) is dus geen oplossing.
Is er een manier om te realiseren wat ik wil zonder een hoogte mee te geven aan div (middle). Let wel: ik wil dus niet dat div (bottom) precies onder in beeld komt of zo (wat veel anderen willen las ik in andere topics). div (bottom) moet ongeacht de hoogte van div (middle) gewoon altijd direct onder div (middle) komen.
Hier mijn (vereenvoudigde) codevoorbeeld:
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
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<style>
#container {
margin:0 auto;
width:770px;
text-align:center;
}
#top {
background-image:url(images/top.jpg);
background-repeat:no-repeat;
width:770px;
height:81px;
}
#middle {
width:770px;
}
#bottom {
width:770px;
height:30px;
vertical-align:middle;
border-color:#000000;
border-style:solid;
border-width:1px;
}
</style>
<body>
<div id="container">
<div id="top"></div>
<div id="middle">
Hier komt dus de content die steeds wisselend is van hoeveelheid en waardoor dus de werkelijke hoogte van deze div tag ook varieert.
</div>
<div id="bottom">
Deze div moet dus altijd direct onder de content (div middle) komen te staan.
</div>
</div>
</body>
</html> |
:strip_exif()/u/46677/CC.gif?f=community)
:strip_exif()/u/105445/zidane2.gif?f=community)
/u/129382/crop5f6f24af0ae5d.png?f=community)
Hier mijn code van de pagina, waarbij het bij mij in FF absoluut niet werkt (zojuist nog getest). Wellicht heeft het er mee te maken dat ik gebruikmaak van float? Als iemand een oplossing weet, heel graag!