Advanced Search

Footer fixed to the bottom

/ Published in: HTML
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3. 	<head>
  4.  
  5. 		<title>A CSS Sticky Footer</title>
  6.  
  7. 		<!--
  8. 		The second stylesheet is to make things look pretty.
  9. 		The first one is only the important one.
  10. 		-->
  11.  
  12. 		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
  13.  
  14. <style type="text/css">
  15.  
  16. body {
  17. 	text-align: center;
  18. }
  19. .wrapper {
  20. 	position: relative;
  21. 	width: 700px;
  22. 	font-size: 0.9em;
  23. 	margin: 0 auto -142px;
  24. 	text-align: left;
  25. }
  26. .header {
  27. 	height: 190px;
  28. 	background: url(header.png) no-repeat;
  29. }
  30. h1 {
  31. 	text-indent: -500em;
  32. }
  33. h2 {
  34. 	padding: 0 0 0.6em;
  35. 	color: #d00;
  36. 	font: 1.4em helvetica,arial,sans-serif;
  37. 	text-shadow: #ddd 1px 1px 2px;
  38. }
  39. p {
  40. 	padding: 0 0 1em;
  41. 	color: #666;
  42. 	font: 1em/1.4em arial,sans-serif;
  43. }
  44. a {
  45. 	color: #000;
  46. 	text-decoration: none;
  47. 	border-bottom: 2px solid #0bf;
  48. }
  49. a:hover {
  50. 	color: #0bf;
  51. }
  52. strong {
  53. 	font-weight: normal;
  54. }
  55. .download {
  56. 	position: absolute;
  57. 	right: 0;
  58. 	top: 160px;
  59. }
  60. .footer {
  61. 	position: relative;
  62. 	width: 700px;
  63. 	margin: 0 auto;
  64. 	color:#333333;
  65. 	background: url(footer.jpg) no-repeat;
  66. }
  67. .footer a {
  68. 	text-decoration: underline;
  69. 	border: 0;
  70. }
  71. .footer p {
  72. 	position: absolute;
  73. 	left: 0;
  74. 	bottom: 4px;
  75. 	width: 700px;
  76. 	padding: 0;
  77. 	color: #fff;
  78. 	font: 0.8em arial,sans-serif;
  79. 	text-align: center;
  80. }
  81.  
  82. * {
  83. 	margin: 0;
  84. }
  85. html, body {
  86. 	height: 100%;
  87. }
  88. .wrapper {
  89. 	min-height: 100%;
  90. 	height: auto !important;
  91. 	height: 100%;
  92. 	margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
  93. }
  94. .footer, .push {
  95. 	height: 142px; /* .push must be the same height as .footer */
  96. }
  97.  
  98. /*
  99.  
  100. Sticky Footer by Ryan Fait
  101. http://ryanfait.com/
  102.  
  103. */
  104. </style>
  105.  
  106. 	</head>
  107. 	<body>
  108.  
  109. 		<div class="wrapper">
  110.  
  111. 			<div class="header">
  112. 				<h1>CSS Sticky Footer</h1>
  113. 			</div>
  114.  
  115. 			<h2>A CSS sticky footer that just works</h2>
  116. 			<p>We've all tried to use a <strong>sticky footer</strong> one time or another, but they never seem to come out right, do they? Well, the days of a hard to understand CSS-based <strong>sticky footer</strong> are thankfully over. In just a few simple CSS classes with minimal extra HTML markup, I've fashioned a <strong>sticky footer</strong> that even beginners can get a handle on. It's been tested in IE 5 and up, Firefox, Safari and Opera.</p>
  117. 			<h2>Usage of the CSS</h2>
  118.  
  119. 			<p><q>Great! this is exactly what I'm looking for! Can I use it?</q></p>
  120. 			<p>Absolutely. There are no terms, licenses, fees or requirements. Use it as you will. If you find the kindness to link to me on your site, I'd appreciate it, but it's by no means necessary. Have fun, and don't be afraid to ask me any questions or send me your thoughts.</p>
  121. 			<p class="download"><a href="layout.css" title="Download the stylesheet">View the CSS</a> or <a href="/resources/footer-stick-to-bottom-of-page/" title="Make a footer stick to the bottom of a page">learn about using it</a></p>
  122.  
  123. 			<div class="push"></div>
  124.  
  125. 		</div>
  126.  
  127. 		<div class="footer">
  128. 			<p>Copyright &copy; 2006-2008 Ryan Fait &mdash; <a href="http://ryanfait.com/" title="Las Vegas Web Design">Las Vegas Web Design</a></p>
  129. 		</div>
  130.  
  131.  
  132.  
  133. 	</body>
  134. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.