HTML CSS examples for CSS Widget:Footer
Fixed header & footer, horizontally centered layout
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> #page-header,<!-- w ww. j a v a2 s .co m--> #page-footer { position:fixed; width:100%; left:0; background:Chartreuse; } #page-header { top:0; height:100px; } #page-footer { bottom:0; height:76px; } #page-content { padding:100px 0 76px; } .inner { width:551px; margin-left:auto; margin-right:auto; text-align:center; background:orange; } </style> </head> <body> <div id="wrapper"> <header id="page-header"> <div class="inner"> Lorem ipsu </div> </header> <div id="page-content"> <div class="inner"> Lorem ipsu </div> </div> <footer id="page-footer"> <div class="inner"> Lorem ipsu </div> </footer> </div> </body> </html>