Adding Sidebar Full width header and footer - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Footer

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

Description

Adding Sidebar Full width header and footer

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Layout</title> 
  <style media="all">

</style> <!--from   ww  w.  j  a  v a2  s  .com-->
 </head> 
 <body> 
  <div class="header-outer"> 
   <div class="header"> 
    <h1>Heading text</h1> 
   </div> 
  </div> 
  <div class="content-outer"> 
   <center> 
    <table> 
     <tbody> 
      <tr> 
       <td> 
        <div class="content"> 
         <p>Body text</p> 
        </div> </td> 
       <td> 
        <div class="sidebar"> 
         <p>Sidebar text</p> 
        </div> </td> 
      </tr> 
     </tbody> 
    </table> 
    <center> 
    </center> 
   </center> 
  </div> 
  <div class="footer-outer"> 
   <div class="footer"> 
    <p>Footer text</p> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials