Position footer at bottom regardless of content height.

**Stevey_V3** · 02-18-2009 12:15 PM

I've been trying for ages, and I cannot work out how to make a footer align at the bottom of a webpage regardless of how tall or small the content is.

My website looks the same in Internet Explorer 7, Firefox, Opera and Safari. All my pages pass validation over at w3.

At the moment each page has a different #footer style tag, this tag changes on each page, inside of the style is just 'top: ?px', this places the footer at the bottom. I've tried 'bottom: 0;' and it simply will not work, here's my code:

Shortened CSS

Code:

/* Foooter CSS */
	

#footer {	
	background: url(images/footer.png);
    	position: absolute;
	top: 660px;
	width: 100&#37;;
	height: 76px;
}
#footer_width {
	width: 870px;
	margin: 0 auto;
	padding-top: 24px;
}
.footer_text {
	display: block;	
	font-family: "Calibri", Arial;
	color: #4c4c4c;	
	font-size: 12px;
	padding-left: 17px;
}

Shortend HTML.

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=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>Steven Knight | Portfolio</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<link href="style/style.css" rel="stylesheet" type="text/css" />
<!-- Seperate CSS code needed for each page for footer -->
<style type="text/css">
#footer {
	top: 1121px;
}
</style>
</head>

<body>
<!-- Container for top content -->
<!-- Navigation bar and header section -->
<div id="top_container">
<div id="nav">
<div id="nav_text">
<a href="/">Home</a>
&nbsp;&nbsp;&nbsp;
<a href="services.htm">Services</a>
&nbsp;&nbsp;&nbsp;
<a href="#">Portfolio</a>
&nbsp;&nbsp;&nbsp;
<a href="contact.htm">Contact</a>
</div>
</div>
<div id="logo">
<div id="header">
</div>
</div>
<br />
<br />
</div>

<!-- Main section container -->
<div id="main">

<!-- Main content section -->
<div id="main_left">
<div id="content_header"></div>
<div id="content_main">
<div id="content_text">
<span class="headline_text">PORTFOLIO</span>
<p>
Content
</p>
</div>
</div>
<div id="content_footer"></div>
</div>

<!-- Sidebar content section -->
<div id="main_right">
<img src="style/images/about.png" alt="About"/>
<p>
Content
</p>
</span>
</div>
</div>

<!-- Footer section -->
<div id="footer">
<div id="footer_width">
<span class="footer_text">
Copyright &#169; 2009. Stevey V3.<br />
Designed and coded by Stevey.
</span>
</div>
</div>
</body>
</html>

How can I make the footer section go at the bottom of the page regardless of page height without the varing top value.

Thank you.

**ScottPrelewicz** · 02-18-2009 01:21 PM

Try this. Seems to be what you want, works in FF and IE7.

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=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>Steven Knight | Portfolio</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<link href="style/style.css" rel="stylesheet" type="text/css" />
<!-- Seperate CSS code needed for each page for footer -->
<style type="text/css">
html {
	height: 100%;
}

body {
	height: 100%;
}

top_container {
	height: 100%;
}

#footer {
	position: absolute;
	bottom: 0;
}
</style>
</head>

<body>
<!-- Container for top content -->
<!-- Navigation bar and header section -->
<div id="top_container">
<div id="nav">
<div id="nav_text">
<a href="/">Home</a>
&nbsp;&nbsp;&nbsp;
<a href="services.htm">Services</a>
&nbsp;&nbsp;&nbsp;
<a href="#">Portfolio</a>
&nbsp;&nbsp;&nbsp;
<a href="contact.htm">Contact</a>
</div>
</div>
<div id="logo">
<div id="header">
</div>
</div>
<br />
<br />
</div>

<!-- Main section container -->
<div id="main">

<!-- Main content section -->
<div id="main_left">
<div id="content_header"></div>
<div id="content_main">
<div id="content_text">
<span class="headline_text">PORTFOLIO</span>
<p>
Content
</p>
</div>
</div>
<div id="content_footer"></div>
</div>

<!-- Sidebar content section -->
<div id="main_right">
<img src="style/images/about.png" alt="About"/>
<p>
Content
</p>
</span>
</div>
</div>

<!-- Footer section -->
<div id="footer">
<div id="footer_width">
<span class="footer_text">
Copyright © 2009. Stevey V3.<br />
Designed and coded by Stevey.
</span>
</div>
</div>
</body>
</html>

**Stevey_V3** · 02-18-2009 01:52 PM

That didn't work, it places it at the bottom of the page that's on show, not the whole page.

**ScottPrelewicz** · 02-18-2009 02:11 PM

Maybe I'm not understanding you, because I'm not sure what the difference between a "page on show" and a "whole page" is. From what I understood of you initial post, you want the footer "pinned" to the bottom of the screen. What I gave you does this in my tests in FF3 and IE7.

**ryanbutler** · 02-18-2009 02:19 PM

Neither of those solutions is going to work. When you absolutely position the footer, it has no idea where the normal flow of the document is at.

What's an example page look like?

**ScottPrelewicz** · 02-18-2009 02:39 PM

Clearly I'm misunderstanding the requirement, as I thought he wanted the footer to be positioned at trhe bottom *regardless* of the normal flow. So, yes, we would need more info and a link would be great.

**Stevey_V3** · 02-18-2009 02:51 PM

Originally Posted by ScottPrelewicz

Clearly I'm misunderstanding the requirement, as I thought he wanted the footer to be positioned at trhe bottom *regardless* of the normal flow. So, yes, we would need more info and a link would be great.

On a shortpage like this the code you gave me is good, but on a long page like this the footer would be in middle of the content because it goes to the bottom of the window and not the height of the browser. I'm on a 1440x900 sized screen so bare that in mind when I say it's a short page.

Basically I want the footer to always be at the bottom if the page is 100px tall or 5000px tall.

**ryanbutler** · 02-18-2009 03:01 PM

You're going about this the wrong way. Each time you position an element absolutely, you're taking it out the document flow, as a result, none of your elements know the relation to each other.

Having said that, here's the approach you should take:

Float main_left and main_right to the left, remove absolute positioning. Then on your footer, get right of the positioning and give it a clear of both. That will give you a sticky footer.

When you float main_left and main_right, you are taking these out of the normal flow, but by giving footer a clear of both, you cause footer to reset to the normal flow of the document, giving it the height it needs to "clear" main_left and main_right.

**Stevey_V3** · 02-18-2009 03:12 PM

That worked, thank you very much

Thread: Position footer at bottom regardless of content height.

Thread Tools

Display

Position footer at bottom regardless of content height.

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions