Forums

heliosphan

Hello,

I've tried to get my footer to stay at the bottom of the page, but nothing I have tried works. I've spent hours researching the answer and tweaking the code to no avail.

Help.

My CSS:


@charset \"UTF-8\";
/* CSS Document */

html, body{height:100%;}
body>#container{height:auto;}

body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #fff url(/images/bgrnd.gif) 50% 0;
	margin: 0; 
	padding: 0;
	text-align: center; 
	font-family:verdana,sans-serif;
	font-size:85%;
	color:#000;
}

#container {
	position:relative;
	width: 940px;  
	background: #FFFFFF;
	margin: 0 auto; 
	text-align: left; 
	min-height:100%;
	height:100%;
overflow: hidden;
}


#header {
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
	background: #fff;
	height:120px;
	border-bottom-style: inset;
	background: url(\"images/header.png\") no-repeat;
	background-position: 40px 5px;
}

.alignRight {
float:right; margin-left: 1em;
}


#mainContent {
	margin: 0 1.5em 0 13em;
	padding-bottom: 50px;
	height:auto;
}


#top-nav {
float:right;
}

#top-nav img{
	position:absolute;
	padding-top:95px;
	margin:0;
	top:0;
	left:715px;
}

.clearing {
height:0;
clear:both;
}


h1, h2, h3, h4, h5 {
	font-family:trebuchet ms,arial,tahoma,verdana,sans-serif;
	font-weight:normal;
	letter-spacing:0.005em;
	color:#696969;
}


h1{
	font-size:2.7em;
	font-weight:normal;
	letter-spacing:-.015em;
	border-bottom:1px solid #CC6600;
	background:#fff;
}

h2 {

font-weight:normal;
	letter-spacing:-.015em;
	border-bottom:1px solid #CC6600;
	background:#fff;
} 

h1, h2, h3, h4, p {
	padding-left:3px;

}

a, a:link {
	color:#4F5A9F;
	text-decoration:none;
}

a:visited {

	color:#909;

}

a:hover, a:active {
	color:#990000;
	text-decoration:underline;
}

ul.cred {
display: block;
list-style: none;
}

.cred li {
padding-bottom:5px;
}




#footer { 
margin: -1.6em auto 0;

position: relative;
height:30px;
      background:#DDDDDD;
	border-top: inset #696969;
} 
#footer p {
	height: 30px;
	font-size:.8em;
	text-align: center
}


.fltrt { 
	float: right;
	margin-left: 8px;
}
.fltlft { 
	float: left;
	margin-right: 8px;
}

<!--[if IE 7]>
<style type=\"text/css\">
DIV.container
{
height: auto;
min-height: 100%;
}
</style>
<![endif]-->

[if IE]>
<style type=\"text/css\"> 
/* place css fixes for all versions of IE in this conditional comment */
#sidebar1 { padding-top: 30px; }
#mainContent {
}
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]
#container #mainContent img {
	padding: 5px;
	float: right;
}

@charset \"UTF-8\";
/* CSS Document */
#left-col {
padding-top: 20px;
	width:12.5em;

	float:left;

}

#left-col h2 {

	font-size:1em;

	line-height:1.25em;

	margin:0;

	border:0;

	padding:0;

	color:#f60;

}



ul.pages {

	margin:10px 0 0 10px ;

}

ul.pages, .cross-links {

	list-style:none;

	padding:0;

	font-size:95%;

}

.pages li {

	border:1px solid;

	border-color:#ccc #bbb #b6b6b6 #ccc;

	margin:0 0 5px 0;
	padding-right:3px;

}

.pages li {

	background:#f1f1f1 url(images/s-bg.gif) top left repeat-x;

}


.pages li a {

	padding:.7em 3px .7em 37px;

	text-decoration:none;
	display:block;


}

.pages a, .pages a:link, .pages a:visited {

	background-position:4px 50%;

	background-repeat:no-repeat;

}

.pages a, .pages a:link, .pages a:visited {
	color:#CC6600;
}

.pages a:hover, .pages a:active, .pages .on a {

	background-position:-462px 50%;

	background-repeat:no-repeat;

}

.pages a:hover, .pages a:active {

	color:#80B37A;

	text-decoration:none;

}



.p-home a {background:url(images/home.gif);}

.p-about a {background:url(images/s-recommendations.gif);}

.p-food a {background:url(images/s-process.gif);}

.p-testimonials a {background:url(images/s-opinion.gif);}

.p-faq a {background:url(images/s-business.gif);}

.p-signup a {background:url(images/s-goal-oriented-design.gif);}




.pages li a:hover, .pages li.on a {

	background-color:#fff;

	color:#80B37A;

}

top-nav {
float:right;
}

My HTML:


<!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=UTF-8\" />
<title>A Site</title>
<link href=\"styles.css\" rel=\"stylesheet\" type=\"text/css\" media=\"screen\" />
<link href=\"navigation.css\" rel=\"stylesheet\" type=\"text/css\" media=\"screen\" />

</head>

<body onload=\"MM_preloadImages('images/about-activated.jpg','images/signup-activated.jpg','images/home-activated.jpg','images/food-activated.jpg','images/testimonials-activated.jpg')\">

<div id=\"container\">
  <div id=\"header\">
  
  <div id=\"top-nav\"><img src=\"images/001_12.gif\" width=\"24\" height=\"24\" /></div>
  </div><!-- end #header -->
  <div id=\"left-col\">


	<ul class=\"pages\" id=\"navSections\">

			<li class=\"p-home\"><a href=\"index.html\" title=\"Home\">Home</a></li>
		<li class=\"p-about\"><a href=\"about.html\" title=\"About Patricks\">About Patrick</a></li>
		<li class=\"p-food\"><a href=\"thoughts.html\" title=\"Food for Thought\">Food for Thought</a></li>
		<li class=\"p-testimonials\"><a href=\"testimonials.html\" title=\"Testimonials\">Testimonials</a></li>
		<li class=\"p-faq\"><a href=\"faq.html\" title=\"FAQ\">FAQ</a></li>
        	<li class=\"p-signup\"><a href=\"signup.html\" title=\"Sign up Now\">Sign up now</a></li>
	</ul>
</div>

  <div id=\"mainContent\">
a bunch of text....

      <!-- end #mainContent -->
  </div>
<div class=\"clearing\">&nbsp;</div>
   <div id=\"footer\">
    <p>&copy; 2008  | Terms Of Use | Privacy Statement</p>
  <!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>

cybershot

give a link to your page so that we can see what your footer is doing. You should always include a link whenever possible. This will help us diagnose what your problem is. Instead of trying to visualize it from your code.

cybershot

without knowing a whole lot. I see that you have position:relative on your footer. You do know that this takes your footer out of the normal flow of the site right? So maybe things you would be expecting to push on it might not be doing that. I don't even have a full grasp of that stuff yet.

heliosphan

Here is the link. On the page that doesn't have a lot of content - the footer is in the middle of the page:

http://patrickprindle.com/testimonials.html

chriscoyier

This is generally the link I give to people who want to get their footer on the bottom of the page:

http://ryanfait.com/sticky-footer/

Pure CSS, pretty elegant really.

heliosphan

Problem solved. Thanks.

daGUY

I've tried to get my footer to stay at the bottom of the page, but nothing I have tried works. I've spent hours researching the answer and tweaking the code to no avail.

I did the same once, and when I finally came up with a solution, I documented it so I could refer myself to it in the future. See here.

treehouse : what would you like to learn today?

Forums

CSS footer to bottom of page - nothing works!