Posted By

toltmanns on 01/06/11


Tagged

css html browser to footer of sticky cross bottom sticks


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

toltmanns
wirenaught


Sticky Icky Footer


 / Published in: CSS
 

URL: http://vr-3.com

Also seen for now at carinsurancerates.com

Assembled this in 2008 and have used it numerous times since then, reliable chunk of code. Jquery can be used to add a nice slide down option like on carinsurancerates.com

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. html > body #footer_wrapper {
  5. bottom: 0;
  6. position: fixed;
  7. }
  8.  
  9. #footer_wrapper {
  10. bottom: 0;
  11. padding: 0;
  12. text-align: center;
  13. width: 100%;
  14. z-index: 110;
  15. }
  16.  
  17. #footer_wrapper {
  18. font-family: Arial,Helvetica,sans-serif;
  19. font-size: 12px;
  20. margin: 0;
  21. }
  22.  
  23. #footer {
  24. -moz-border-radius: 3px 3px 0 0;
  25. background: url("/images/footer_bar.png") no-repeat scroll left top transparent;
  26. border-bottom-width: 0;
  27. bottom: 15px;
  28. height: 54px;
  29. margin: 0 auto;
  30. padding-top: 22px;
  31. text-align: left;
  32. width: 940px;
  33. z-index: 120;
  34. }
  35.  
  36. #footer_wrapper {
  37. text-align: center;
  38. }
  39. #footer_wrapper {
  40. font-family: Arial,Helvetica,sans-serif;
  41. font-size: 12px;
  42. }
  43. </style>
  44.  
  45. <!--[if IE 6]>
  46. <link href="/css/ie6.css" rel="stylesheet" type="text/css" />
  47. <![endif]-->
  48.  
  49.  
  50. </head>
  51. <body>
  52. <div id="footer_wrapper">
  53. <div id="footer">
  54. Footer stuff goes here
  55.  
  56. </div>
  57. </div>
  58. </body>
  59. </html>

Report this snippet  

You need to login to post a comment.