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.

Thread: Position footer at bottom regardless of content height.

Thread Tools

Display

Threaded View

Position footer at bottom regardless of content height.

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions