HTML CSS examples for CSS Widget:Footer
Move footer down to the page end
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> @charset "utf-8"; body {<!--from w ww . jav a 2 s . co m--> margin:0; padding:0; height:auto; width:100%; display:block; } header { width:100%; height:445px; background-color:Chartreuse; color:yellow; text-align:center; display:block; } footer { width:100%; height:112px; margin-top:5%; background-color:blue; color:pink; text-align:center; display:block; } .page { width:100%; height:auto; margin-bottom:5%; display:block; } #intro_links { width:89%; overflow:auto; margin:auto; display:block; } .nav_link { width:24%; height:138px; float:left; text-align:center; text-decoration:none; margin:5% 0 5% 3%; display:block; background-color:OrangeRed; color:grey; } .title_01 { width:45%; height:45px; background-color:BlueViolet; font-size:30pt; color:Chartreuse; display:block; float:left; clear:both; } .new_artist_pane { width:67%; height:auto; border:2px solid yellow; float:left; margin:5% 0 0 3%; display:block; } .art_pane01 { width:100%; height:334px; float:left; border:2px solid blue; margin-bottom:5%; display:block; } </style> </head> <body> <div id="front_page" class="page"> <header> Lorem ipsum dolor s </header> <div id="intro_links"> <a class="nav_link" href="#">Lorem ipsum</a> <a class="nav_link" href="#">Lorem ipsum</a> <a class="nav_link" href="#">Lorem ipsum </a> <a class="nav_link" href="#">Lorem ipsum </a> </div> <div id="new_artists" class="title_01"> Lorem ipsum d </div> <div class="new_artist_pane"> <div class="art_pane01"> </div> <div class="art_pane01"> </div> <div class="art_pane01"> </div> </div> <div style="clear:both;"></div> </div> <!--front_page--> <footer> Lorem ip </footer> </body> </html>