Footer position problem

I'm having trouble getting my footer div positioned correctly in a template. I want it at the bottom of the page. It renders OK here on Win98 in IE6 and NN7, but in Mozilla and Opera 7 it is towards the top of the page. CSS is linked, not imported. I've tried various ways of positioning the div, but without success. The height of #contmins varies according to page content. Can anyone please point out where I'm going wrong? Many thanks, Jools.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>text</title>
</head>
<body>
<div id="outer">

<div id="hdr" align="center">  <div id="tracker">text
</div><div align="right" id=headpic>images</div></div>

<div id="bar"><form method="get" action="">
<div class="ground">Background<br>
colour:<br>
</div>
</form></div>

<div id="bodyblock">

<div id="l-col" align="left">

<div id="links">
<h1>text</h1>
</div>

</div>


<div id="contmins">
<p>text</p>
</div>

</div>

</div>


<div id="ftr" align="right">images</div>
</div>

</body>
</html>

#outer {
width: 98%;
height: 100%;
}

#hdr {
height: 3%;
margin-top: 2%;
}

#headpic {
height: 10%;
width: 80%;
}

#tracker {
display: none;
}

#bar {
padding-left: 20px;
vertical-align : top;
border : none;
height: 3%;
}

#bodyblock {
width: 100%;
position: relative;
height: 80%;
padding: 0px;
vertical-align : top;
margin-top: 10px;
}

#l-col {
float: left;
padding: 0px;
z-index: 1;
vertical-align: top;
text-align: left;
width: 16%;
height: 100%;
}

#contmins {
position: relative;
vertical-align: top;
width: 80%;
float: right;
height: 1px;
}

#ftr {
margin: 0px;
height: 10%;
margin-bottom: 2%;
width: 100%;
text-align : center;
float: right;
}

Footer position problem

OK IE6/NN7, not Opera7/Mozilla1.4a

joolsm

joolsm

TGecho

joolsm

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week