Set the overflow to hidden to protect the elements go beyond footer - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Footer

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

Description

Set the overflow to hidden to protect the elements go beyond footer

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>
html, body {
   height:100%;
   margin:0;
   padding:0;
}

#wrap {<!--   ww  w  .  j  a v  a2  s .  co  m-->
   min-height:100%;
   margin:-28px auto 0;
}

.container {
   padding-top:28px;
   margin:0 auto;
   width:81%;
}

#footer {
   height:27px;
   border-top:2px solid Chartreuse;
   background:yellow;
}
</style> 
 </head> 
 <body> 
  <div id="wrap"> 
   <div class="container">
     Lorem ipsum dolor s 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br>Lorem ipsum dolor s 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br>Lorem ipsum dolor s 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br>Lorem ipsum dolor s 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
   </div> 
  </div> 
  <div id="footer">
    Lorem ipsum dolor sit amet, co 
  </div>  
 </body>
</html>

Related Tutorials