advanced code snippet search

Posted By

rogalski on 02/17/11


Tagged

css footer sticky blueprint


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

tootcak
Hepamin
wirenaught


Sticky CSS Footer w/ Blueprint

 / Published in: HTML
 
Expand | Embed | Plain Text 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. 	"http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4. 	<head>
  5. 		<title>Index Page</title>
  6.  
  7. 		<link href="css/blueprint/blueprint/screen.css" rel="stylesheet" type="text/css" media="screen"/>
  8. 		<link href="css/blueprint/blueprint/print.css" rel="stylesheet" type="text/css" media="print"/>
  9.  
  10. 		<!-- style page layout -->
  11. 		<style type="text/css">
  12. 			html, body {
  13. 				height:100%;
  14. 			}
  15. 			div.container {
  16. 				height:100%;
  17. 			}
  18. 			div#page-wrapper {
  19. 				height:100%;
  20. 				min-height:100%;
  21. 			}
  22. 			div.page {
  23. 				border:1px solid green;
  24. 				overflow:auto;
  25. 				padding-bottom:100px;
  26. 			}
  27. 			div.page p {
  28. 				margin:0;
  29. 				padding:0;
  30. 			}
  31. 			div.footer {
  32. 				position:relative;
  33. 				margin-top:-100px;
  34. 				height:100px;
  35. 			}
  36. 		</style>
  37. 		<!-- end style page layout -->
  38.  
  39. 		<!-- apply colors/backgrounds/etc -->		
  40. 		<style type="text/css">
  41. 			body {
  42. 				background-image:url(images/bg1.png);
  43. 			}
  44. 			div.footer {
  45. 				background-color:orange;
  46. 			}
  47. 		</style>
  48. 		<!-- end apply colors/backgrounds/etc -->
  49.  
  50. 	</head>
  51. 	<body>
  52. 		<div class="container showgrid">
  53. 			<div class="span-24 header">
  54. 				<p>the header</p>
  55. 			</div>
  56. 			<div id="page-wrapper" class="span-25 last">
  57. 				<div class="span-22 push-1 page">
  58. 					<p>main page content</p>
  59. 				</div>
  60. 			</div>
  61. 			<div class="span-24 footer last">
  62. 				<p>the <em>sticky</em> footer</p>	
  63. 			</div>
  64. 		</div>
  65. 	</body>
  66. </html>

Report this snippet  

You need to login to post a comment.