CSS - Creating Footer Fixed To Bottom Unless Content Pushes It Down.

Does such a thing exist? I have seen various examples and tried more than one, and every time I either end up with a right margin when the page is not long enough to scroll, or I end up with a horizontal scroll bar when the page is scrolling.

All I want is a fixed position footer (at the bottom of the viewport permanently) where the page content scrolls vertically behind it without any gaps

Hi all,

I need some help. I have implemented a fixed header on my site, but certain content is scrolling above the header while other is scrolling behind. I would like it all to scroll behind the fixed div's.

First, I should share this fantastic piece of code for sticky footers (footer stays at the bottom even when content is short):

http://scott.sauyet.com/CSS/Demo/FooterDemo1.html

It works great for a liquid layout in FF and IE6.

However, for fixed width layout, the container is left justified instead of centering the container. See:

http://shawkey.com/stickyfooter/fixedlayoutstickyfooter.html

Anyone want to hack at this with Firebug and see if they can get the container to be centered?

Thanks!

I have stumbled onto two issues with my layout. I have a fixed footer and I have my three columns and the problem I am having is that the content hides behind the fixed footer which is what I want. However when the content is just not enough it gets clipped behind the footer and what I'd like is to have i scroll up to the top of the footer in that situation. How would I do that in my css?

The second issue is that when I have a lot of content it breaks out of the container div or at least it appears that way. I'd like it to push the columns down inside the container as needed.

The css and xhtml arevalid.

Here is the link:

http://www.lonniebruhn.com/sitelab/

Thanks for your help
LB

Okay I've gotten to a point in my design where I'm a bit stumped.

I have been working on a three column layout with a fixed header and footer. The entire idea behind the fixed footer is so that my entire promotional press kit and social networks will be available and in view in the footer above the fold at all times for easy access.

After a few little tweaks the layout looks good and turned out nicely. However, now I am adding content and navigation and I am having some issues with regards to how it is reacting when my browser window is re-sized and the layout of the far left navigation.

Okay so when I shrink the browser window two things happen, I get a horizontal scroll, which isn't too bad, I mean that is normal in a lot of sites but because the footer and header are fixed it looks a little weird. Is there a way to stop this without going fluid? The other thing it does when it is shrunk, the background image in the footer shifts to the right along with the navigation which should not happen if it is fixed right? What is could be causing that? If I have nested div inside the footer div does it need to be declared fixed too or can it be relative because it is a child of the footer?

The biggest problem is that my navigation menu on the left will have four links. I would like two links above and two links below. I would like the top left and bottom left to align to the left with space between those two links and the top right and bottom right, which will also align left. How would I accomplish this using the least amount of mark up in the xhtml and the least amount of code in css?

Right now they aren't links, I'm just trying to lay it first. What I was thinking, was using a div to hold a footer ul and li class? Would I just apply the class to each link or would I apply the class to two, one div class above holding two links and one div class below or do I even need an extra footer div anyway if I'll be assigning separate classes?

I'm confused as to the best way to fix all this, your help would be appreciated, the xhtml validates and so does the css.

Here is the link to the testing site: http://www.lonniebruhn.com/sitelab/

Greetings!

I am trying to position a transparent gif at the bottom of a page, repeating on the x axis, so that text scrolls behind it.

I have the gif fixed at the bottom of the page, but the text is still over top of it. I think I will need to create an element, position it at the bottom of the page, use the transparent gif for the background, and give it a z-index higher than zero, right? If so, I can't get it it to work!

What I am currently doing: Code:

body{
  background:transparent url('/flames.gif') center bottom fixed repeat-x;
}

Hey

I am relativly new to CSS and i was wondering how can i make the footer of my page stick to the bottom of the screen if the page is relativly short. I use a 800x600 as my design size but there might be long and short pages.

Can anyone shed some light?

Here is my code

PHP Code:
<!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=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" title="Disabled for Preview-in-Browser: ../css/basics.css" type="text/css" />
<style type="text/css">
<!--

/* CSS Document */

body{
background-color:#FFFFFF;
color:#000000;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin:0px;
padding:0px;
font-size:80%;
text-align:center;
}


#wrapper{
width: 750px;
background-color:#FFFFFF;
margin: 10px auto;
text-align: left;
}
/* ---------------------------------Header content---------------------------------------------*/
#header {
height: 150px;
border-bottom: 1px solid #CC0000;
}

/*this is to make sure al content apears below the header*/
.clearit{
clear: both;
display: block;
}
/*---------------------------------Main Contant------------------------------------------------*/
#content {
background-color:#FFFFFF;
margin-left:177px;
margin-top:25px;
margin-right:100px;
}

#content p{
background-color:#FFFFFF;
}

#content h1{
font-size: 140%;
color: #CC0000;
padding: 0;
margin-bottom:20px;
font-weight:bold;
}

#content h2{
font-size: 110%;
color: #CC0000;
padding: 0;
margin-top:30px;
}

#content li{
color:#000000;
list-style-position:inside;
list-style-type:disc;
}

#content form h3{
font-size: 100%;
color: #CC0000;
padding: 0;
margin:0;
}

#content form h2{
font-size: 115%;
color: #CC0000;
padding: 0;
text-transform:uppercase;
}

.BoldRed{
color:#CC0000;
font-weight:bold;
}

.verse{
color:#006699;
font-style:italic;
}
/*use for commendattions names*/
.greyed {
color:#666666;
font-style:italic;
}

.leftimage{
float: left;
margin-right: 10px;
margin-bottom:10px;
border: 1px solid #000000;
clear:left;
}

.container{
width:99%;
float:right;
}


/*-------------------------------Left Collum Content---------------------------------------------*/
#leftcol {
font-size:100%;
margin-top:30px;
float:left;
width: 167px;
background-color: #FFFFFF;
}
/*------------------------------Footer Content---------------------------------------------------*/
#footer{
margin-top:30px;
border-top: 1px solid #CC0000;
background-color: #FFFFFF;
color: #000000;
clear: both;
}

-->
</style>
</head>

<body>
<!-- Start wrapper -->
    <div id="wrapper">
        
<!-- Start of Header -->    
        <div id="header">
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="750" height="150">
            <param name="movie" value="../homepageFlashElements/header.swf" />
            <param name="quality" value="high" />
            <embed src="../homepageFlashElements/header.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="750" height="150"></embed>
          </object>
        
        <!-- Clear a line-->
            <div class="clearit">
            </div>
        
        </div>
<!-- End of Header -->
        
<!-- Start of Left Colum -->
        <div id="leftcol">
          <div align="left"><img src="../images/courses/colours_08.jpg" width="143" height="143" border="1px"/></div>
          <p>    Navigation content here
          </p>
          <p></p>
      </div>
<!-- End of Left Colum -->
        
<!-- Start of Content -->
        <div id="content">
            <h1>Heading</h1>
            <p>Some Content. This may very in length</p>
        </div>
<!-- End of Content -->
        
<!-- Start of Footer -->
        <div id="footer">
          <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="750" height="50">
              <param name="movie" value="../homepageFlashElements/footer.swf" />
              <param name="quality" value="high" />
              <embed src="../homepageFlashElements/footer.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="750" height="50"></embed>
          </object>
        </div>
<!-- End of Footer -->
            
    </div>
<!-- End wrapper -->

</body>
</html> 

http://wdcb.org/newsite/

Having some difficulty here in putting the footer at the bottom of the page. I've looked at dozens of help tools, and none of them work. I'm obviously missing something.

Page code:
Code:

<html>  
	<body>
		
			<div id="header">
				<?php include('includes/menu_new.inc'); ?>
			</div>
			
				<div id="leftcol">
					<div class="element">
						<img alt="" src="../images/buttons/PledgeNow.jpg">
						<p>This is what text underneath would look like.  I know that some of our boxes on the right side can do this so we want to make sure it looks right.</p>
					</div>
					
					<div class="element">
						<b>PLEDGE NOW</b>
					</div>
		
					<div class="element">
						<b>PLEDGE NOW</b>
					</div>
				</div>
			
				<div id="content">Content Section dfsdf dfdf fsdf dfsdf sdfsd ghh ghgh hghtr ytgdf gfdfgdf </div>
			
				<div id="rightcol">
					<div class="element">
						<a href="http://iRockJazz.com/" target="_blank"><img alt="" border=0 src="../images/ads/iRJ_wdcb_tile_199pix.jpg"></a>
					</div>
				
					<div class="element">
						<img alt="" src="../images/mini-headers/MiniHeader-FolkRoots.jpg" width="200">
						<p>
							Our days may be dedicated to jazz, but during the evenings it's all about the folk! WDCB plays more folk and acoustic roots music than any other station in Northern Illinois.
							<br><br>
							<a href="programming/progfolkroot.php">Click here</a> to learn more.
						</p>
					</div>
				</div>
			
			<div id="footer">
				<?php include('includes/footer.inc'); ?>
			</div>
				
	</body>  
</html>

CSS code:
Code:

#header {
position: absolute;
top: 5px;
left: 5px;
width: 1000px;
height: 182px;
}

#leftcol {
background: #f00;
position: absolute;
top: 187px;
left: 0px;
width: 235px;
}

#leftcol .element {
	margin-bottom:15px;
}

#leftcol p {
	margin-left:5px;
}

#content {
background: #ccc;
position: absolute;
top: 187px;
left: 250px;
width: 540px;
}

#rightcol {
background: #f00;
position: absolute;
top: 187px;
left: 800px;
width: 200px;
}

#rightcol .element {
	margin-bottom:15px;
}

#rightcol p {
	margin-left:5px;
}

#footer {
   position:fixed;
   bottom:0px;
   width:1000px;
   height:100px;
   background:#005288;
}

Thank you in advance for your help.

I created a footer that sits on the bottom of the screen using this code:

.footer {
padding-top:5px;
margin-top:5px;
font-size:8pt;
color:#FFFFFF;
position:absolute;
bottom:0px;
background-image:url('gfx/bg-bottom.jpg');
height:22px;
width:100%;
}


It looks fine when the window is expanded to the size of the screen, but when you shrink it down (so the scroll bar will appear) and then scroll, the footer bar scrolls with the page.. It's kind hard to explain, just give it a try he

http://www.juiceboxseo.com/do-it.php

Is there a way to make sure it stays on the bottom?

Hi!

i'm trying to position footer at the very bottom.
this example does it as expected (if the page is longer than viewport, footer will be at the end of page):
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title></title>		
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
		<style type="text/css">
        <!--
			body {
				margin: 0;
				padding: 0;
				font: 12px/1.5 verdana, arial, helvetica, sans-serif;
			}
			#content {
				padding: 10px;
				background-color: #ff8080;
			}
			#footer {
				position: absolute;  /* Needed for Safari */
				padding: 10px;
				background-color: #aa3939;
				width: 75%;
			}
			#footer h1 {
				padding-bottom: 0;
			}
			h1, p {
				margin: 0;
				padding-bottom: 1em;
			}
			h1 {
				font-size: 12px;
				line-height: 1.5em;
			}
        -->
        </style>
		<script type="text/javascript">
		<!--
		function getWindowHeight() {
			var windowHeight = 0;
			if (typeof(window.innerHeight) == 'number') {
				windowHeight = window.innerHeight;
			}
			else {
				if (document.documentElement && document.documentElement.clientHeight) {
					windowHeight = document.documentElement.clientHeight;
				}
				else {
					if (document.body && document.body.clientHeight) {
						windowHeight = document.body.clientHeight;
					}
				}
			}
			return windowHeight;
		}
		function setFooter() {
			if (document.getElementById) {
				var windowHeight = getWindowHeight();
				if (windowHeight > 0) {
					var contentHeight = document.getElementById('content').offsetHeight;
					var footerElement = document.getElementById('footer');
					var footerHeight  = footerElement.offsetHeight;
					if (windowHeight - (contentHeight + footerHeight) >= 0) {
						footerElement.style.position = 'absolute';
						footerElement.style.top = (windowHeight - footerHeight) + 'px';
					}
					else {
						footerElement.style.position = 'static';
					}
				}
			}
		}
		window.onload = function() {
			setFooter();
		}
		window.onresize = function() {
			setFooter();
		}
		//-->
		</script></head><body>
		<div id="content">
			<h1>Content</h1>
			<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
		</div>
		<div style="position: absolute; top: 810px;" id="footer">
			<h1>Footer</h1>
		</div>
	</body></html>

but when i try to add left/right boxes, it fails. try to scroll down the page (footer is placed at the bottom of viewport, not page):
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
		<style type="text/css">
        		<!--
			body {
				margin: 0;
				padding: 0;
				font: 12px/1.5 verdana, arial, helvetica, sans-serif;
			}
			#head
			{
				padding-left:20px;
				padding-top:20px;
				padding-right:20px;
				background-color: #FFF;
				background-image: url('/public/images/header-background.gif');
				background-repeat: repeat-x;
				background-position: bottom
			}
			#logo
			{
				height: 100px;
				background-image: url('/public/images/header.jpg');
				background-repeat: no-repeat
			}
			#content
			{
			}
			#leftcontent
			{
				float:left;
				width:67%;
				margin:10px;
				padding:30px 30px 70px 30px;
				border: 1px solid #000;
				background-color: #33251C
			}
			#leftcontent h1
			{
				color: #936FC4
			}
			#leftcontent h2
			{
				color: #FFF
			}
			#rightcontent
			{
				margin:15px
			}
			p, pre
			{
				margin:0px 30px 10px 30px
			}
			#rightcontent p
			{
				font-size:10px;
				margin-left:0px
			}
			#navcontainer
			{
				margin: 0;
				padding: 0;
				height: 22px;
				font: 11px Verdana, sans-serif;
				width: 100%;
				border-top: 1px solid #bbb;
				border-bottom: 1px solid #bbb;
				list-style-type: none;
				background: #FFF
			}
			#navlist li
			{
				float: left;
				margin: 0;
				padding: 0;
				width: auto;
				display: block
			}
			#navlist li a, #navlist li a:link
			{
				background: #FFF;
				color: #555;
				text-decoration: none;
				padding: 3px 5px 3px 5px;
				display: block
			}
			#navlist li a#current, #navlist li a#current:link
			{
				color: #000;
				cursor: default;
				font-weight: bold;
				border-bottom: 3px solid #f90;
				background: #EEE
			}
			#navlist li a#current:hover
			{
				border-bottom: 3px solid #999;
				background: #DDD
			}
			#content {
				padding: 10px;
				background-color: #ff8080;
			}
			#footer {
				position: absolute;  /* Needed for Safari */
				padding: 10px;
				background-color: #aa3939;
				width: 75%;
			}
			#footer h1 {
				padding-bottom: 0;
			}
			h1, p {
				margin: 0;
				padding-bottom: 1em;
			}
			h1 {
				font-size: 12px;
				line-height: 1.5em;
			}
        -->
        </style>
		<script type="text/javascript">
		<!--
		function getWindowHeight() {
			var windowHeight = 0;
			if (typeof(window.innerHeight) == 'number') {
				windowHeight = window.innerHeight;
			}
			else {
				if (document.documentElement && document.documentElement.clientHeight) {
					windowHeight = document.documentElement.clientHeight;
				}
				else {
					if (document.body && document.body.clientHeight) {
						windowHeight = document.body.clientHeight;
					}
				}
			}
			return windowHeight;
		}
		function setFooter() {
			if (document.getElementById) {
				var windowHeight = getWindowHeight();
				if (windowHeight > 0) {
					var contentHeight = document.getElementById('content').offsetHeight;
					var footerElement = document.getElementById('footer');
					var footerHeight  = footerElement.offsetHeight;
					if (windowHeight - (contentHeight + footerHeight) >= 0) {
						footerElement.style.position = 'absolute';
						footerElement.style.top = (windowHeight - footerHeight) + 'px';
					}
					else {
						footerElement.style.position = 'static';
					}
				}
			}
		}
		window.onload = function() {
			setFooter();
		}
		window.onresize = function() {
			setFooter();
		}
		//-->
		</script></head><body>
		<div id="content">
			<div id="head">
				<div id="logo">
				</div>
			</div>
			<div id="navcontainer">
				<ul id="navlist">
				<li><a href="/">home</a></li><li><a href="/mix/" id="current">mixes</a></li><li><a href="/gallery/">gallery</a></li><li><a href="/contact/">contact</a></li></ul>
	
			</div><br/>
			<div id="leftcontent">
				<h1>My Mixes</h1>
				<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
			</div>
			<div id="rightcontent">
				right side
			</div>
		</div>
		<div style="position: absolute; top: 810px;" id="footer">
			<h1>Footer</h1>
		</div>
	</body>
</html>

how may i fix it?
thanx!

Ok, I've taken many different approaches to this and I can't find a solution. I'm looking to make my footer align to the bottom of the browser window. For some reason I can't so I figured I'd post up my code here and get a different set of eyes to scan over it and help me out.

Here's the code:

Code:

<!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" xml:lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<!--CSS-->
		<link rel="stylesheet" href="structure.css" type="text/css" media="screen" />
		<link rel="stylesheet" href="print.css" type="text/css" media="screen" />
	
			<title> MY TITLE GOES HERE! </title>
		
	</head>
	
<body>

<div id="container">

        <div id="nav_container">

	MY MENU STUFF GOES HERE!

        </div>

<div id="content">

	<div id="left_column">
	
	BLAH BLAH all my content goes here!

	</div>
	
<div id="right_column">
	
ALL OF MY RIGHT CONTENT HERE!
			
</div>

</div>

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

</div>

</body>

</html>

and this is the stylesheet driving the page:

Code:

body {
	background-image: url("gfx/bg.jpg");
	background-repeat: repeat-y;
	background-position: center;
	background-color: #FFFFFF;
	margin: 0px;
	font-family: Tahoma;
	font-size: 13px;
}



/*Page Structure --------------------------------------*/
#container {
	background-color: #FFFFFF;
	position: absolute;
	left: 50%;
	margin-left: -394px;
	width: 790px;
	height: 100%;
	border: 1px solid Black;
	border-top: 0px;
	border-bottom: 0px;
}

#content {
	background-color: #FFFFFF;
	width: 790px;
	float: left;
	margin: 0px;
	padding: 0px 0px 0px 0px;
}

#left_column {
	width: 390px;
	float: left;
	display: inline;
	margin: 15px 0 0 20px;
   padding: 0px 0px 15% 4px;
	border-right: 1px solid #DFDFDF;
}

#right_column {
	width: 326px;
	float: left;
	margin: 15px 0 0 0px;
   padding-bottom: 10%
}



/*Headers and Flash content -----------------------------*/
#header	{
	background-image: url("gfx/header.jpg");
	width: 790px;
	height: 101px;
	float: left;
	line-height: 1000px;
	overflow: hidden;
}

#home_header {
	background-image: url("gfx/home_header.jpg");
	background-repeat: no-repeat;
	background-color: #FFFFFF;
	width: 380px;
	height: 150px;
	margin: 0px 0 10px 0px;
	float: left;
	line-height: 1000px;
	overflow: hidden;
}

#recent_posts	{
	background-image: url("gfx/recent_posts.jpg");
	background-repeat: no-repeat;
	width: 368px;
	height: 30px;
	margin-left: 3px;
	float: left;
	text-indent: -1000px;
	overflow: hidden;
}

#latest_threats	{
	background-image: url("gfx/latest_threats.jpg");
	background-repeat: no-repeat;
	width: 368px;
	height: 30px;
	margin: 25px 0 0 3px;
	float: left;
	text-indent: -1000px;
	overflow: hidden;
}

#recommended_sites	{
	background-image: url("gfx/recommended_sites.jpg");
	background-repeat: no-repeat;
	width: 215px;
	height: 30px;
	margin: 25px 0 0 3px;
	float: left;
	text-indent: -1000px;
	overflow: hidden;
}

#flash	{
	background-color: #000000;
	width: 790px;
	height: 120px;
	float: left;
	vertical-align: middle;
}



/*Navigation --------------------------*/
#nav_container	{
	background-image: url("gfx/nav_bg.jpg");
	background-color: #FFFFFF;
	width: 790px;
	height: 24px;
	float: left;
	text-align: right;
}


/*News Structure --------------------------*/
#news_header	{
	background-color: #FFFFFF;
	width: 390px;
	height: auto;
	float: left;
	font-size: large;
	font-weight: bold;
	color: #009AFF;
	margin: 3px 0 2px 0;
}

#news_post	{
	background-color: #FFFFFF;
	width: auto;
	height: auto;
	float: left;
	color: Gray;
	margin: 0px;
}

#news_date	{
	background-color: #FFFFFF;
	width: auto;
	height: auto;
	float: left;
	font-size: 11px;
	font-style: italic;
	color: Gray;
	margin-left: 5px;
}

#news_content	{
	background-color: #FFFFFF;
	width: 390px;
	float: left;
	margin-top: 20px;
}



/*Lists----------------------------------*/

#post_list {
	background-image: url("gfx/gradient.jpg");
	width: 371px;
	float: left;
	margin: 2px 0 0 0px;
	list-style-type: none;
	padding: 0px 0px 10px 0px;
}

#post_list li {
	background-color: transparent;
	padding: 5px;
	border-bottom: 1px solid #EDEEEE;
}

#threats_list {
	background-image: url("gfx/gradient.jpg");
	width: 371px;
	float: left;
	margin: 2px 0 0 0px;
	list-style-type: none;
	padding: 0px 0px 10px 0px;
}

#threats_list li {
	background-color: transparent;
	list-style-image: url("gfx/red_arrow2.jpg");
	list-style-position: inside;
	padding: 5px;
	border-bottom: 1px solid #EDEEEE;
}


/*Footer--------------------------------------------------*/
#footer {
	background-image: url("gfx/footer.jpg");
	background-repeat: no-repeat;
	background-color: #FFFFFF;
	width: 790px;
	height: 125px;
	float: left;
	margin-top: 40px;
}

Any help or insight is greatly appreciated. I just made the jump to complete CSS layouts about 3 days ago so I'm still really new to this

Thanks in advance,
AA.

I've been trying to implement a footer on the site I'm working on, and I want it to stay at the bottom of the page. If there's content that pushes down, I want the footer at the bottom of the content.

I've been trying to implement the method described by these two sites: http://www.sitepoint.com/forums/showpost.php?p=1239966&postcount=3
http://www.themaninblue.com/writing/perspective/2005/08/29/

but I'm having a hard time with the longer content page.

Here's two examples on the site I'm working on that I have up and nearly ready. Short page: http://windrivers-gsp.com/WRK/index.php
Long page: http://windrivers-gsp.com/WRK/hclub.php or
http://windrivers-gsp.com/WRK/dams.php

As you can see, the footer won't go to the bottom of the longer content on the long page, and I can't figure out why. I believe I've cleared everything, even implementing the PIE/Aslett clearfix on the container div.

I think I'm just to the point where I need some more experienced eyes to take a glance and point out where I must have missed something. Any help is greatly appreciated!

Oh, BTW, here's the addy for my CSS: http://windrivers-gsp.com/WRK/wrkCSS.css

And yes, I know there's a nasty hack in place currently for the navigation menu. I'm working on that after I get the footer problem fixed.

I believe this has been asked before, but I'm unsure what search terms to use...

Basic one column CSS layout. How to keep the footer at the bottom of the window even when content doesn't reach that far?

Hi there, my first post here.

I'm working on my first site using CSS for layout. I have a footer as a div that I want to be the last thing on the page, doesn't need to stick to the bottom or anything. It's obeying on my other pages, but on this index page I can't figure out why its not going to the bottom.

the site is at w w w. montrosemusicseries com / indextest html

I'm assuming its some kind of float thing that's not clearing, but I have my <br style="clear:both"/> in there. I also tried a div clear to no avail. Any suggestions?


Thanks,

Stuart