No doubt, Header and footer both are most important part in a web site layout. Both of the contain unique information about your website and also worthy links.Sometimes web designer and developer wants to make always visible while visitors scroll page contents.

In my last post, I was discussed about "How to create a stitched effect using css3". Hope you enjoyed that. Today I’m going to show how you can make a sticky or fixed header and footer layout using CSS.

CSS has a very nice property called position:fixed and by using this property we can easily make sticky any content in our web layout. Some css frameworks provide built-in css class and we can easily use them in our web layout. But if you are in basic stage and not familer with framework than you can easily create a fixed header and footer layout by following this scripts. It's very simple. Let's go-

- HTML code For sticky header and footer:

 
         
  Logo of coolajax.net        
 



  

   
Sticky Header and Footer! 
   
No doubt, Header and footer both are most
  



  

   copyright © www.coolajax.net 2009-2012
  

- CSS code For sticky header and footer:

body { 
        margin:0; padding:0; 
       font-family: verdana; 
       font-size: 11px;
}

p{line-height: 1.8em;}
 
#header-container { 
    background:white; 
    border-bottom:2px solid blueviolet; 
    height:130px; left:0; 
    position:fixed; 
    width:100%; top:0; 
    z-index: 1000;
}
#header{ 
         line-height:130px; 
         margin:0 auto; width:1020px; 
         text-align:center; }
 
#container { 
    margin:0 auto; overflow:auto; 
    padding: 130px 0;
    width:940px;
}
 
#footer-container { 
    background:lightgoldenrodyellow; 
    border-top:2px solid green; 
    bottom:0; 
    height:60px; 
    left:0; 
    position:fixed; 
    width:100%; 
}

#footer { 
    line-height:60px; 
    margin:0 auto; 
    width:1020px; 
    text-align:center; 
}

- Supported Browsers:

1. Internet Exploer 7,8

2. Firefox all version

3. Google Chrome all version.

4. Safari.

- Demo:

Live demo

- Download:

Download Now

Was this information useful? What other tips would you like to read about in the future?  Share your comments, feedback and experiences with us by commenting below!

  You might also like...

  5 Awesome CSS3 Buttons with Smooth Animation

  popular css frameworks for modern web layout design

  How to create a stitched effect using css3

  10 Best CSS Editor For Freelance Web Designers

  Super Useful CSS3 Tools For Web Developer

Share:

  Author: Md Mahbub Alam Khan (255 Posts)

Md Mahbub Alam Khan is the Editor and Founder of CoolAJAX Web Blog. You can follow CoolAJAX on Twitter , on Facebook or you can subscribe via RSS .

Write For Us & Be An Exclusive Post Author!