CSS footer at the bottom and not at the very bottom - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Footer aligned bottom

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Footer aligned bottom

Description

CSS footer at the bottom and not at the very bottom

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
html, body {
   padding:0;
   margin:0;
   height:100%;
   width:100%;
   background-color:Chartreuse;
}

#heading1 {<!--  ww w . j  a  v  a  2  s.co m-->
   text-align:center;
}

#footer {
   background-color:yellow;
   -webkit-border-radius:31px;
   -moz-border-radius:31px;
   border-radius:31px;
   -webkit-box-shadow:3px 3px 5px blue;
   -moz-box-shadow:3px 3px 5px pink;
   box-shadow:3px 3px 5px OrangeRed;
   text-align:center;
   max-width:401px;
   margin:0 auto;
}

.div-wrapper {
   width:100%;
   height:13px;
   position:fixed;
   bottom:100px;
}

.text {
   margin:0 auto;
   padding-left:100px;
   padding-right:100px;
   white-space:nowrap;
}
</style> 
 </head> 
 <body> 
  <div id="heading1"> 
   <h1>Lorem</h1> 
  </div> 
  <div class="div-wrapper"> 
   <div id="footer"> 
    <div class="text">
      Lorem ipsum 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials