mirror of
https://github.com/ENSL/ensl.org.git
synced 2024-12-27 04:51:14 +00:00
105 lines
6.8 KiB
HTML
105 lines
6.8 KiB
HTML
|
|
<?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="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 -->
|
|
<!-- 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 -->
|
|
<!-- 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 -->
|
|
<!-- 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 -->
|
|
<!-- 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 -->
|
|
<!-- 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 -->
|
|
|
|
<!-- 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 --> <!-- 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 --> <!-- 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 --> <!-- 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>
|
|
|
|
<script type="text/javascript">
|
|
_uacct = "UA-1848067-8";
|
|
urchinTracker();
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|