Avatar of allanmark
allanmark asked on

Fixing footer at bottom of page

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>

Open in new window

CSSHTML

Avatar of undefined
Last Comment
allanmark

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
nexusnation

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
allanmark

Many thanks!
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy