cross browser sticky header and footer using css

cross browser sticky header and footer using css

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-

Cross browser sticky header and footer using css

– HTML code For sticky header and footer:

<div id="header-container">
 <div id="header">         
  Logo of coolajax.net        
 </div>
</div>

<div id="container">
  <div id="content">
   <h3>Sticky Header and Footer! </h3>
   <p>No doubt, Header and footer both are most</p>
  </div>
</div>

<div id="footer-container">
  <div id="footer">
   copyright © www.coolajax.net 2009-2012
  </div>
</div>

– 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!

Share It

Related Posts