advanced code snippet search

We Recommend

CSS: The Definitive Guide CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.

Posted By

rouxmout on 04/02/08


Tagged

css layout footer


Versions (?)


Who likes this?

12 people have marked this snippet as a favorite

rouxmout
chill3d
paullorentzen
basicmagic
cataua
JimiJay
vertoo
brent-man
hannizkaos
uisluu
eriksagen
discorax


CSS Sticky Footer

Published in: CSS 

URL: http://scott.sauyet.com/CSS/Demo/FooterDemo1.html

Plain TextExpand 
  1. html, body, #contents {
  2. 	min-height: 100%;
  3. 	width: 100%;
  4. 	height: 100%;
  5. }
  6.  
  7. /*
  8.  * The "height" above is a hack for IE5+/Win.  Below we adjust
  9.  * it using the child selector to hide from IE5+/Win
  10.  */
  11.  
  12. html>body, html>body #contents {
  13. 	height: auto;
  14. }
  15.  
  16. /*
  17.  * Without this, Moz1.0 adds a vertical scrollbar
  18.  */
  19.  
  20. body {
  21. 	margin: 0;
  22. 	font-family: Arial, sans-serif;
  23. }
  24.  
  25. #contents {
  26. 	position: absolute;
  27. 	top: 0;
  28.     left: 0;
  29. /*  Use the following to center this at 50% width, or this for 750px: width: 700px, margin-left: -350px: */
  30. /*
  31. 	left: 50%;
  32.     width: 50%;
  33.     margin-left: -25%;
  34. */
  35. }
  36.  
  37. #footer {
  38. 	position: absolute;
  39. 	bottom: 0;
  40. 	background-color: #ccffcc;
  41. 	width: 70%; /* See note below */
  42. 	text-align: center;
  43. 	padding: 0 15%;
  44. }
  45.  
  46. /* SBMH -- see http://css-discuss.incutio.com/?page=BoxModelHack 
  47.  * Stupid hack lets IE see 100%, others see 70%. 
  48.  */
  49. #footer {
  50.     \width: 100%;
  51.     w\idth: 70%;
  52. }
  53.  
  54. #main {
  55. 	margin-bottom: 5em;
  56. 	height: auto;
  57. 	padding: .5em;
  58. }

Report this snippet 

You need to login to post a comment.