HTML CSS examples for CSS Widget:Footer
Footer in main content with full width
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body {<!--from w w w . j ava 2 s .c o m--> background:url('https://www.java3s.com/style/demo/Google-Chrome.png'); } header { max-width:601px; width:100%; display:block; background:Chartreuse; height:251px; border:2px solid yellow; margin:auto; } #content { max-width:601px; width:100%; display:block; background:blue; height:501px; border:2px solid pink; margin:auto; } footer { width:100%; height:301px; left:0; background:OrangeRed; } </style> </head> <body> <header> <div class="container"> <div class="row"> <div class="col-lg-12"> Lorem ipsum </div> </div> </div> </header> <section id="content"> <div class="container"> <div class="row"> <div class="col-lg-12"> Lorem ipsum </div> </div> </div> </section> <footer> <div class="container-fluid"> <div class="row"> <div class="col-lg-12"> Lorem ipsum dolor </div> </div> </div> </footer> </body> </html>