Stick div to bottom left corner and above footer - 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

Stick div to bottom left corner and above footer

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <title>Lorem ipsum dolor sit ame</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
* {<!--  ww w.  ja va  2s  . c  o m-->
   margin:0;
   padding:0;
}

#wrapper {
   width:100%;
   height:100%;
   margin:0
}

#flyover {
   background-color:Chartreuse;
   color:yellow;
   position:fixed;
   top:88.6%;
   z-index:5;
   border-radius:0 51% 51% 0;
   padding:31px 31px 31px 41px;
   left:-31px;
}

#footer {
   background:green;
   position:relative;
   height:100px;
   width:100%;
   bottom:0;
   z-index:2;
   text-align:center;
}

.content {
   height:auto;
   background:lightblue;
   width:301px;
   margin:0 auto;
   text-align:center
}
</style> 
  <script type="text/javascript">

      </script> 
 </head> 
 <body> 
  <div id="wrapper"> 
   <div id="flyover">
     Lore 
   </div> 
   <div class="content">
     Lorem ipsum dolor sit 
    <div style="padding: 800px 0">
      Lorem ipsum do 
    </div> 
   </div> 
   <div id="footer">
     Lorem ipsum dolo 
   </div> 
  </div> 
  <!-- close wrapper -->  
 </body>
</html>

Related Tutorials