Profile image for Daniel Halldorsson Owlyfool
css to go in boilerplate primary styles section
Language
CSS
Tags
footer html5 sticky

HTML5 Boilerplate Sticky Footer With 100% wide centered header/footer CSS

1 /* 2 Sticky Footer Solution 3 by Steve Hatcher 4 http://stever.ca 5 http://www.cssstickyfooter.com 6 */ 7 8 * {margin:0;padding:0;} 9 10 /* must declare 0 margins on everything, also for main layout components use padding, not 11 vertical margins (top and bottom) to add spacing, else those margins get added to total height 12 and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */ 13 14 html, body {height: 100%;} 15 16 #wrap {min-height: 100%;} /*originally called wrap */ 17 18 #main { 19 /* overflow:auto; */ /* ffox fix */ 20 overflow-x: hidden; /* ffox fix */ 21 overflow-y: auto; /* ffox fix */ 22 padding-bottom: 150px;} /* must be same height as the footer */ 23 24 25 footer {position: relative; 26 margin-top: -150px; /* negative value of footer height */ 27 height: 150px; 28 clear:both;} 29 30 /*Opera Fix*/ 31 body:before {/* thanks to Maleika (Kohoutec)*/ 32 content:""; 33 height:100%; 34 float:left; 35 width:0; 36 margin-top:-32767px;/* thank you Erik J - negate effect of float*/ 37 } 38 39 /* IE8 hack to get it to apply margin auto centering to element inside this one */ 40 #wrap {width:100%} 41 42 43 44 /* Header */ 45 #header-wrap {width:980px;margin:0 auto;padding:0 10px 0 10px} 46 47 /* Content Area */ 48 #main {width:980px;margin:0 auto;clear:both;padding-right:10px;padding-left:10px} 49 50 /* Footer */ 51 #footer-wrap {width:980px;margin:0 auto;background: url('images/duct-tape.jpg') no-repeat;height:140px;line-height:1.1em;padding:0 10px 0 10px}

Comments