Leave Extra space between articles and footer

Description

Demo Code

<html>
 <head> 
  <title>Lorem ipsum dolor sit </title> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
html {<!-- www . j av a2s  .c  o m-->
   margin:0px;
   padding:0px;
}

body {
   margin:0px;
   padding:0px;
   font-style:italic;
}

body #container {
   min-width:801px;
}

body #container header nav {
   height:68px;
   background-color:Chartreuse;
   position:fixed;
   width:100%;
}

body #container header nav ul {
   margin:0px;
   padding:0px 16px;
   list-style-type:none;
}

body #container header nav ul li {
   display:inline;
   float:left;
}

body #container header nav ul li a {
   display:block;
   padding:0px 9px;
   text-decoration:none;
   line-height:68px;
   font-weight:bold;
   color:yellow;
}

body #container header nav ul li.selected a {
   background-color:blue;
}

body #container #wrapper {
   margin:0px 16px 0px 16px;
   padding:68px 0px 0px 0px;
   background-color:pink;
   box-shadow:0px 0px 11px 6px OrangeRed;
   overflow:auto;
}

body #container footer {
   margin:0px 16px 0px 16px;
   padding:0px;
   background-color:grey;
   height:auto;
   overflow:auto;
}
</style> 
 </head> 
 <body> 
  <div id="container"> 
   <header> 
    <nav> 
     <ul> 
      <li class="selected"> <a href="">Lorem ips</a> </li> 
      <li> <a href="">Lorem i</a> </li> 
      <li> <a href="">Lo</a> </li> 
      <li> <a href="">Lorem ip</a> </li> 
      <li> <a href="">Lorem i</a> </li> 
     </ul> 
    </nav> 
   </header> 
   <div id="wrapper"> 
    <h1>Lorem ipsum dolor</h1> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisci</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscin</p> 
   </div> 
   <footer> 
    <p>Lorem ipsum do</p> 
   </footer> 
  </div>  
 </body>
</html>

Leave Extra space between articles and footer - HTML CSS CSS Widget

Description

Demo Code

Related Tutorials