CloudNovational Thoughts…

Introduction

Sticky footers are footers that always stick to the bottom of your browser window, even if the dynamic content is too short to “push” down on its own. Implementing this effect brings cleaness and consistency to your web interface designs.  If you’ve ever spent time looking at ways to implement this effect, I’m sure you’ll agree with me that it’s a bit of a challenge making the CSS behave the same throughout different web browsers (i.e. Firefox, IE, Opera, Safari, etc.).  In this tutorial, I’ll show you how to have these effects consistent throughout all web browsers. First, I’ll show you how to implement the sticky footer effect. Then, having something “glued” onto the side of your browser window. Please give credits to Steve Hatcher and Ryan Faits, as they were the ones who discovered these approaches.

Sticky Footer Approach

Within your HTML layout code, you should construct a basic structure resembling somewhat like the following:

[code lang="html"]

[/code]

Note, your footer div should be outside of the wrapper div. Header and Content divs should rest within the wrapper div. If you need to have any other contents outside of the wrapper div, you’ll need to make sure to set the position property to ‘absolute’, or else it would screw up the spacings.

Within your CSS stylesheet, you should have something of the following:

[code lang="css"]
html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

#main {padding-bottom: [your_settings] px;} /* must be same height as the footer */

#footer {position: relative;
margin-top: -[your_settings] px; /* negative value of footer height */
height: [your_settings] px;
clear:both;}
[/code]

**[your_settings]** represents your footer’s banner height. Depending on your web interface design, this may vary. Play around with the calibrations until you get it to look right.

You should also have this Clearfix settings around also. Nothing new. This approach has been around for a while. It resolves a lot of issues relating to floating div’s and such between various browser types.

[code lang="css"]
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
[/code]

Sticky Side Approach

I’m sure you’ve seen this on some sites. If you want to have something stick to either side of your browser window, below is how you would do so with css. Note, this is just a snippet. You’ll need to play around with the calibrations within your stylesheet.

[code lang="css"]
.sticky-side {
background:transparent url(../im) repeat scroll 0 0;
height:100px;
left:15px;
position:fixed;
top:200px;
width:150px;
}
[/code]

If you’re clever, you can probably figure out a way to have the sticky side always stick dynamically within the middle of your browser window, no matter how large or small you stretch your window. I’ll leave that to your free time…