Layout Absolute positioned content to create overlapping footer - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Footer

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

Description

Layout Absolute positioned content to create overlapping footer

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">
.container {<!--from  ww  w .  jav  a  2s . c om-->
   position:relative;
}

.box1 {
   background:red;
   color:Chartreuse;
}

.box2 {
   background:green;
   color:yellow;
}

.box3 {
   background:blue;
   color:blue;
}

.box1,
.box2,
.box3 {
   display:table;
}
</style> 
 </head> 
 <body> 
  <div class="maincontent">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at metus nisi. Sed blandit, nunc eget ornare porta, lorem est cursus eros, in ultricies enim mi eget leo. Integer a odio at neque lobortis fermentum ac at purus. Vivamus faucibus nec tortor at sagittis. Nam lectus metus, scelerisque vehicula orci ac, lacinia elementum lorem. Nam efficitur mauris quis tortor efficitur, vitae viverra metus semper. Nunc id euismod purus. 
   <div class="container"> 
    <div class="box1">
      Box 1 Content 
    </div> 
    <div class="box2">
      Box 2 Content 
    </div> 
    <div class="box3">
      Box 3 Content 
    </div> 
   </div> 
  </div> 
  <footer>
    This is the footer 
  </footer>  
 </body>
</html>

Related Tutorials