Make full width header/footer in one column layout - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Footer Column

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

Description

Make full width header/footer in one column layout

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>  Maverick</title> 
  <style>
body {<!--from w  w w  .j  av a  2s .  c  o  m-->
   color:Chartreuse;
   padding:0;
}

header,footer {
   background:yellow;
   width:100%;
   padding:31px;
   margin:0;
}

.container {
   width:961px;
   margin:0 auto;
   background:black;
}

.wrapper {
   background:url('http://www.java2s.com/style/demo/Google-Chrome.png');
   background-repeat:no-repeat;
   background-attachment:fixed;
   background-position:center
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="wrapper"> 
   <header> 
   </header> 
   <div class="container"> 
    <h1>HTML Ipsum Presents</h1> 
    <p> <strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code> , ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis. </p> 
    <h2>Header Level 2</h2> 
    <ol> 
     <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
     <li>Aliquam tincidunt mauris eu risus.</li> 
    </ol> 
    <blockquote> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p> 
    </blockquote> 
    <h3>Header Level 3</h3> 
    <ul> 
     <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
     <li>Aliquam tincidunt mauris eu risus.</li> 
    </ul> 
    <pre>
               <code>
#header h1 a {
    display: block;
    width: 300px;
    height: 80px;
}
</code>

            </pre> 
   </div> 
   <footer> 
   </footer> 
  </div>  
 </body>
</html>

Related Tutorials