troubleshooting Question

Fixing footer at bottom of page

Avatar of allanmark
allanmark asked on
CSSHTML
2 Comments1 Solution1107 ViewsLast Modified:
Greetings all

I am trying to fix a footer to the bottom of a page. I downloaded some sample code which works great - except for one thing -- I want the header to always remain visible.

Any ideas?


In advance, thanks!!
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
<head>
	<title>How to keep footers at the bottom of the page (CSS demo)</title>
	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
	<meta name="description" content="How to keep footers at the bottom of the page (CSS demo)" />
	<meta name="keywords" content="How to keep footers at the bottom of the page (CSS demo)" />
	<meta name="robots" content="index, follow" />
	<style media="screen" type="text/css">
    /* <!-- */
	html,
	body {
		margin:0;
		padding:0;
		height:100%;
	}
	#container {
		min-height:100%;
		position:relative;
	}
	#header {
		background:#ff0;
		padding:10px;
	}
	#body {
		padding:10px;
		padding-bottom:60px;	/* Height of the footer */
	}
	#footer {
		position:absolute;
		bottom:0;
		width:100%;
		height:60px;			/* Height of the footer */
		background:#6cf;
	}
	/* other non-essential CSS */
	#header p,
	#header h1 {
		margin:0;
		padding:10px 0 0 10px;
	}
	#footer p {
		margin:0;
		padding:10px;
	}
	/* --> */
    </style>
 
	<!--[if lt IE 7]>
	<style media="screen" type="text/css">
    /* <!-- */
	#container {
		height:100%;
	}
	/* --> */
    </style>
    <![endif]-->
</head>
<body>
 
<div id="container">
	<div id="header">
		<!-- Header start -->
		<p><a href="http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page" title="How to keep footers at the page bottom with valid CSS">&laquo; Back to the CSS article</a> by <a href="http://matthewjamestaylor.com">Matthew James Taylor</a></p>
 
		<h1>How to keep footers at the bottom of the page (CSS demo)</h1>
		<!-- Header end -->
	</div>
	<div id="body">
		<!-- Body start -->
		<p>In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Non-standards compliant browsers degrade gracefully by positioning the footer under the content as per normal. Read the <a href="http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page">full article</a> for all the details.</p>
		<p>In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Non-standards compliant browsers degrade gracefully by positioning the footer under the content as per normal. Read the <a href="http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page">full article</a> for all the details.</p>
	
		<!-- Body end -->
	</div>
	<div id="footer">
		<!-- Footer start -->
		<p><strong>Footer</strong> (always at the bottom). View more <a href="http://matthewjamestaylor.com/blog/-website-layouts">website layouts</a> and <a href="http://matthewjamestaylor.com/blog/-web-design">web design articles</a>.</p>
 
		<!-- Footer end -->
	</div>
</div>
 
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
 
<script type="text/javascript">
_uacct = "UA-1848067-8";
urchinTracker();
</script>
 
</body>
</html>
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 2 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 2 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros