Advanced Search

Return to Snippet

Revision: 14249
at May 26, 2009 14:54 by johnloy
Initial Code 
<?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" />
	<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>

		<!-- 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>



</body>
</html>
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

                                    

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
Page footer that sticks to viewport bottom unless content is beyond viewport

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    
css, textmate, template, layout

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
Other