<DIV> probleem met footer in IE 6.0
In 7.0 werkt hij wel vloeiend.
Heeft iemand een ide hoe ik die footer werkend kan krijgen?
De footer is het gele gedeelte.
Verder wordt hij qua hoogte ook niet 100%.
Als ik height op 100% zet dan gaat het in IE 7.0 weer niet goed, dan staat de footer altijd onderaan de pagina.
Maar als er een gigantische lap tekst in staat moet de footer wel onderaan staan ,en niet onderaan het beeldscherm (dus over de andere tekst heen).
Ik hoop dat iemand me hiermee verder kan helpen.. .
<!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">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Fixed Sticky Header Footer</title>
<style type="text/css">
body,html{
height: 100%;
margin-top:0px;
margin-bottom:0px;
}
#container {
width: 990px;
min-height:100%;
position: relative;
margin: 0 auto;
background-color:#660000;
}
#header {
height: 100px;
background: blue;
}
#menu{
width:100%;
height:188px;
background-color:#000066;
}
#note{
width:100%;
height:70px;
background-color:#CC9900;
}
#extra{
width: 100px;
float: left;
background-color:#9900CC;
}
#content {
background: green;
overflow-y: auto;
overflow-x: hidden;
float:right;
margin-bottom:50px;
width: 790px;
}
#right{
width: 100px;
float: right;
background-color:#663300;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
height: 50px;
background: yellow;
left: 0px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">Header</div>
<div id="menu"></div>
<div id="note"></div>
<div id="extra"></div>
<div id="right"></div>
<div id="content">
<p>Voeg hier een lange tekst in om te zien dat er dan in deze sectie een verticale scrollbalk ontstaat. </p>
<p>Behalve in IE6 - daar rekt de sectie uit, achter de footer langs.</p>
<p>asd</p>
<p>sdf</p>
<p>asdf</p>
<p>sdf</p>
<p>ads</p>
<p>f </p>
<p>s</p>
<p>da\fs</p>
<p>f</p>
<p>asdf</p>
<p>asdf</p>
<p>sa</p>
<p>f</p>
<p> </p>
<p>fsdadskllaatste rege </p>
</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
Dit werkt 'redelijk'.
In het midden heb ik 3 kolommen, echter als dezen verschillen qua hoeveelheid inhoud, dus als de ene hoger is dan de ander dan krijg ik een probleem met mijn footer.
is dit op te lossen?
Of moet ik de footer methode van Jan proberen ?
Werkt die methode ook met meerdere browsers?
Alvast bedankt.
Mijn code:
<!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" lang="en" xml:lang="en">
<head>
<title>Layout met 100% hoogte</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
*{
padding:0;
margin:0;
}
p {
padding: 1em 0;
}
html, body {
height: 100%; /* héél belangrijk */
color: #000;
background: #C63;
text-align: center;
}
div#container {
width: 990px;
margin: 0 auto;
text-align: left;
position: relative;
min-height: 100%;
height: auto !important; /* voor moderne browsers */
height: 100%; /* voor IE */
background: #FFF;
overflow: hidden;
}
div#header{
height:166px;
background: #859C0E;
}
div#menu{
height:188px;
background-color:#000099;
}
div#note{
height:52px;
background: #859C0E;
}
div#extra{
height:200px;
width:100px;
background-color: #660000;
float: left;
}
div#extra-right{
height:200px;
width:100px;
background-color: #660000;
float: right;
}
div#content {
background-color:#00FF00;
width:500px;
}
div#footer {
border-top: 1px solid #555;
position: absolute;
bottom: 0; /* heel belangrijk */
width: 100%;
background: #85C325;
height: 40px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">Header</div>
<div id="menu">Menu</div>
<div id="note">note</div>
<div id="extra">links
asdf<br />
sdf<br />
adfs<br />
adf<br />
s<br />
dsf<br />
f<br />
asdf<br />
sdf<br />
adfs<br />
adf<br />
s<br />
dsf<br />
f<br />
asdf<br />
sdf<br />
adfs<br />
adf<br />
s<br />
dsf<br />
f<br />
sfadsf<br />
</div>
<div id="extra-right">rechts</div>
<div id="content">
<p>Jeez, one aesthetic quail acceptably forgot behind some frightening human. Hmm, a bee is less tardy than a incongruous grizzly bear. Umm, the worm is less excursive than this flagrant hippopotamus. Um, the tamarin is far less obedient than a subversive wallaby.</p>
<p>Uh, one exulting squirrel bearishly grimaced excepting that objective crane. Gosh, the inappreciable fish sufficiently froze for this imperative terrier.</p>
<p>Well, that extrinsic elephant bucolically groaned excluding one legitimate eel. Yikes, that raccoon is far less blank than a academic rat. Darn, one gull is more mad than the consistent piranha. Ah, one logic lobster unerringly rid within a courteous cat.</p>
</div>
<div id="footer">Hier staat de footer, helemaal onderaan</div>
</div>
</body>
</html>