Sticky Footer Issues

HTML & CSS
1

Hello,

I am attempting to make a sticky footer for my website. I’ve been fighting with this thing for a couple hours and have one of 3 things happen.

  1. The footer will overlap content.
  2. The footer will be directly under the content, instead of stuck to the bottom of the window.
  3. It is stuck to the bottom of the page, but always below the window frame (needs to be scrolled to, no matter how little content is in the window).

Currently I have it at Scenario 2, and don’t know how to make it work correctly.

The current status of the website can be viewed at 1026 Music, below is my code:

<!DOCTYPE html>
<html>
  <head>
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<link href="./css.css" rel="stylesheet" type="text/css" media="screen" />
    <title>1026 Music</title>	
  </head>
  <body>

  	<div id="wrapper">
		<div id="1026musicheader_hype_container" style="position:relative;overflow:hidden;width:760px;height:280px;">
			<script type="text/javascript" src="1026music-header_Resources/1026musicheader_hype_generated_script.js?27783"></script>
		</div>  	
  		
		<div id="sidebar">
  			<a href="">Lorem</a> ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  		</div>
  		
  		<div id="content">
			<h2 class="title">Story Title</h2>
  			<div id="story">
				<a href="">Lorem</a> ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  			</div> 	
  			
  			<h2 class="title">Another Title</h2>
  			<div id="story">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  			</div> 
  		</div>
	</div>	
  <div id="footer">
  	footer stuff
  </div>
  
  </body>
</html>

body {
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #787878;
	height: 100%;
	min-height: 100%;
}

html, body, #wrapper { height: auto; }
body > #wrapper { height: auto; min-height: 100%; }

#wrapper {
	min-height: 100%;
	clear: both;
	margin-left: auto;
	margin-bottom: 10px;
	margin-right: auto;
	margin-top: 10px;
	padding: 0px;
	width: 760px;
	padding-bottom: 3em;
}

#content {
	border-top-color: #05009c;
	border-top-width: 2px;
	border-top-style: inset;
	width: 760px;
	margin-top: 8px;
	padding-top: 2px;
}

#story {
	margin-bottom: 8px;
	padding-left: 10px;
	padding-bottom: 2px;
	padding-right: 10px;
	text-align: justify;
	float: left;
	border-right-color: #d1d1d1;
	color: black;
	border-right-width: 1px;
	border-right-style: solid;
	width: 520px;
	padding-top: 2px;
	margin-top: 8px;
}

#story a {
	color: black;
}

#story a:hover {
	color: #00ff2a;
}

h2.title {
	font-variant: small-caps;
	font-family: monospace;
	width: 515px;
	border-bottom-style: solid;
	border-bottom-color: #d1d1d1;
	border-bottom-width: 1px;
	text-shadow: 0px 0px;
	font-size: 22px;
	font-style: italic;
	font-weight: bold;
	color: #05009c;
}

#sidebar {
	padding: 2px;
	margin-right: auto;
	margin-left: auto;
	font-style: italic;
	margin-top: 25px;
	float: right;
	width: 210px;
}

#footer {
 padding-top: 5px;
 border-top-color: #00008c;
 border-top-width: 2px;
 border-top-style: inset;
 text-align: center;
 margin-right: auto;
 margin-left: auto;
 width: 720px;
 bottom: 0px;
 clear: both;
 position: relative;
}

#footer p {
	margin: 0;
	line-height: normal;
	font-size: 11px;
	text-transform: uppercase;
	text-align: center;
}

#footer a {
	color: #3D444F;
}

I would greatly appreciate any help getting this to work correctly.

2

Hi Jeremy1026. Welcome to SitePoint. :slight_smile:

Sticky footers can be very buggy unless done well, and there’s a sticky thread here that explains all the ins and outs of doing it properly, which I recommend you read:

See if that helps, and then don’t hesitate to post back if you have problems implementing it. :slight_smile:

3

Hi and welcome to Sitepoint from me also :slight_smile:

As Ralph said we have a good resource for the sticky footer b ut I shuld point out that the code you are using won;t work anyway.


body { 	margin: 0; 	padding: 0; 	font-family: Arial, Helvetica, sans-serif; 	font-size: 12px; 	color: #787878; 	height: 100%; 	min-height: 100%; }  html, body, #wrapper { height: auto; } body > #wrapper { height: auto; min-height: 100%; }

You can’t base a height (or min-height) on a parent that has a min-height only. To create an intial 100% height you need html and body to be height:100% and then the main wrapper can use their height with min-height:100%.


html,body{
margin:0;
padding:0;
height:100%;
}
#wrapper{min-height:100%}
* html #wrapper{height:100%}/* ie6 min-height hack */

That’s the basics of the technique but then you need to create space for the fixed height footer with negative margins etc abd the best way to do that is as explained in the faq. There are also fixes built in for opera, IE8 and others which all other sticky footers seem to miss.

4