footer woes [Archive] - CodingForums.com

NancyJ

12-20-2005, 09:44 AM

I'm trying to get my footer to stay at the bottom of the viewport or bottom of the content ( if the content is longer than the viewport). I've followed numerous tutorials, all based around the same principle of having a wrapper with a minimum height of 100% and absolutely positioning the footer at the bottom of it but none of them work for me. In IE the footer sits at the bottom of the content, regardless and in FF it disappears completely.

Ideally I'd like the footer to go accross both the sidebar and the content but as long as its in the right place then I could live with it being just accross the content.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>MatchMakers-Recruitment</title>
<style type="text/css">

</style>
</head>

<body id="jobs">
<div id =" mainwrap">
<div id =" contentwrap">
<div id =" masthead">

<h1><a href =" index.asp"><img src="images/mmr.gif" alt =" MatchMakers-Recruitment" width="550" height="34" /><span>MatchMakers-Recruitment.com</span></a></h1>
</div>

<div id =" images"><img src="images/imagestop.gif" width="157" height="125" alt =" " /><img src="images/random/4.jpg" alt =" " /><img src="images/imagesbottom.gif" width="157" height="124" alt =" " /></div>

<div id =" content">
</div>
<div id =" footer">Test</div>
</div>

<div id =" sidebar">
<br />
<a href =" index.asp"><img src="images/mmlogo.gif" alt =" MatchMakers-Recruitment" width="141" height="127" class =" logo" /></a>
<ul id =" nav">
<li><a href =" index.asp" class =" navhome">» Home</a></li>
<li><a href =" jobs.asp" class =" navjobs">» Jobs</a></li>
<li><a href =" service.asp" class =" navservice">» Service</a></li>

<li><a href =" question.asp" class =" navquestion">» Questionnaire</a></li>
<li><a href =" contact.asp" class =" navcontact">» Contact Us</a></li>
</ul>
<img src="images/navbottom.gif" />
</div>

</div>

</body>
</html>

/* set defaults */
* {
margin:0px;
padding:0px;
}
ul, ol{
margin-left:25px;
padding-left:25px;
}

html{
height:100%;
margin-bottom:1px;
}

a img{
border:0px;}

/* Layout */

#mainwrap{
width:770px;
margin:auto;
padding:0 1px 0 1px;
}

#mainwrap {
position: relative;
min-height: 100%;
height: 100%;
voice-family: "\"}\"";
voice-family: inherit;
height: auto;
}

html>body #mainwrap {
height: auto;
}

#contentwrap{
float:right;
width:609px;
}

#masthead{
width:100%;
height:70px;
position:relative;
right:1px;
}

#content{
width:400px;
}

ul#nav{
width:156px;
position:relative;
}

#sidebar{
width:156px;
position:absolute;
top:0;
margin-left:1px;
}

img{
border:0px;
padding:0px;
margin-bottom:-3px;}

/* style */

body{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:0.7em;
line-height: 1.3em;
letter-spacing:0.02em;
word-spacing:0.1em;
color:#231963;
background-color:#FFF;
background-image:url(../images/bg.gif);
background-repeat:repeat-y;
background-position:center;

}

h1, h2, h3, h4, h5{
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 1em;
}

#mainwrap{
}
#masthead{
background-color:#CCC;
padding-top:25px;
text-align:center;
border-bottom:3px double #999;
}
#content{
padding:15px;
margin-bottom:50px;
}
#sidebar{
text-align:left;
background-color:#E3E1F7;

}
ul#nav{
padding:0px;
margin:0px;
text-align:left;
list-style-type:none;
margin-top:15px;
}
ul#nav li{
font-family:Georgia, "Times New Roman", Times, serif;
height:29px;
}
ul#nav li a{
line-height:29px;
background-image:url(../images/navbg.gif);
display:block;
width:141px;
padding-left:15px;
font-size:12px;
font-weight:bold;
text-decoration:none;
color:#231963;
background-color:inherit;
}
ul#nav li a:hover{
background-position:0 -29px;
color:#639;
}
.logo{
margin-left:5px;
}
h1 span{
display:none;
}
p{
margin:10px;
}
h2{
width:100%;
border-bottom:1px solid #231963;
font-size:1.1em;
line-height:1.5em;}

#index ul#nav li a.navhome, #jobs ul#nav li a.navjobs, #service ul#nav li a.navservice, #question ul#nav li a.navquestion, #contact ul#nav li a.navcontact{
background-position:0 -29px;
color:#639;
}
.row{
clear:both;
padding-left:20px;
padding-top:5px;
}
.label{
font-weight:bold;
width:40%;
float:left;
}
.label2{
width:65%;
float:left;
}
input, textarea, select{
border:3px double #9996B0;
background-color:#E3E1F7;
color:#231963;
font-family:Verdana, Arial, Helvetica, sans-serif;
vertical-align:middle;
}
input:focus, textarea:focus, select:focus{
background-color:#FFF;}
label{
line-height:14px;
padding-left:20px;
}

.nostyle{
border:0px;
margin:0px;
padding:0px;
background:none;
}
fieldset{
width:563px;
padding:5px;
border:3px double #9996B0;
}
legend{
font-family:Georgia, "Times New Roman", Times, serif;
color:#231963;
font-weight:bold;
font-size:1.2em;}
#images{
background-image:url(../images/imagesbg.gif);
width:157px;
text-align:center;
float:right;
margin-right:10px;
*margin-right:5px;
}
#footer{
width:100%;
height:30px;
background-color:#CCC;
text-align:center;
border-top:3px double #999;
margin-left:-1px;

}