What is it about?
Now we want to make the footer stick to the bottom of the page. Again, many designs promoted on the web are pure crap. But it is still possible to find valid information out there, and even to understand what makes this design work.

Who is telling you the truth?
This time our starting point will be the CSSStickyFooter site. Use this link to see his code: http://www.cssstickyfooter.com/using-sticky-footer-code.html

But some comments and explanations are in order
So this is what we want to achieve:
Three column layout nested div structure
div id="wrap"

div id="header" Header goes here /div (header)

div id="main" class="clearfix"
...
Main goes here (this is where we put our three-column layout)
...
/div (main)

/div (wrap)

div id="footer" Footer goes here /div (footer)

And here is the css code that we use:

html, body, #wrap {height: 100%;}

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

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

#footer {position: relative;margin-top: -150px; height: 150px;clear:both;}

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;} /*seen by all browsers, fixes IE Mac*/
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}/*hidden from IE Mac, seen by all other browsers*/
.clearfix {display: block;} /*and resets display to block*/
/* End hide from IE-mac */
1) html, body wrap tags
height:100%; //takes the whole screen
2) body > #wrap
This is only for "wrap" division under "body"

height: auto; min-height:100%;
This tells browser to take no less than 100% for the wrap division but take more space if needed (content longer than 1 page, for instance)

3) #main
This is column container
padding-bottom: 150px; /* footer will encroach into main's teritory */

4) #footer
Position it relative to normal location, keep away other floating elements

5) .clearfix:after
The ":after" pseudo-element can be used to insert some content after the content of an element.
The content property defines the content to be inserted.
In this example, the content is "." so that a dot will be inserted after each occurrence of a clearfix class.
This dot will be displayed as a block, will allow no text floating to the left or to the right, will have zeroheight, and, in addition, will be invisible.

6) .clearfix
clearfix itself is to be displayed as inline-block. This means the element will generate a block box, laid out as an inline box

7) html .clearfix { height: 1%;} and .clearfix {display: block;}
For Firefox and Chrome, let them know that clearfix is to be displayed as a block having a very small height.

How does this code work?

So here is the basic sequence. We create a division called "wrap", which will contain everything except the footer. Inside the "wrap" division we place an (optional) division called "header" and then the main division, which, unsurprisingly, is called "main" and will contain the actual site content such as the three-column layout described in the previous section. The footer goes after the "wrap" division.

In the CSS code we specify that footer has the height of 150 pixels and "margin-top" property equal to -150 pixels, which will raise the header's content exactly 150 pixels above its default position. The clear:both property discourages other elements from attempting to float to either side of the footer. The relative positioning of the footer positions it relative to its normal position, which is right after the "wrap", and "wrap" is defined to have the height of 100% of the window.
But there are caveats
What is this clearfix class doing here? Its job is to fix the problem with inner floating elements such as "main" which is inner relative to "wrap". The problem is that when a float is contained within a container box that has a visible border or background, that float does not automatically force the container's bottom edge down as the float is made taller. So if "main" is taller than 100%, the lower border of "wrap" may refuse to follow it, and "main" will hang down out of the container bottom.

The solution to this predicament is to place a "cleared" element last in the container box, which is then recognized by the container height, forcing the container to enclose the float above that cleared element too. It is described in more detail, for example, at http://www.positioniseverything.net/easyclearing.html , which also provides an illustration showing that the cleared element will always hang low enough to give just enough vertical space to the tallest preceding element. To make a long story short, if "main" tries to stick out, then the cleared element following "main" will ensure than "main" has enough room within the "wrap" container, in other words, it will force the lower border of "wrap" to come down. The container will recognize this division because it is not floated. What else remains to do but to make this element zero height so that the lower border of "main" is always aligned with that of "wrap"?

Since the "main" division will belong to the "clearfix" class, we put into this class all the required functionality that fixes the problem with floats. The cleared element that does the trick will be the rarely-used pseudo class (:after) that will place a hidden, cleared full-stop after the content.

Notice that {display: block;} is also applied to the :after element, because if it isn't then that element defaults to "inline", and cannot receive the "clear" property.

Now what about that code that hides clearfix's properties from IE? The trouble is, IE7 does not support the :after pseudoclass yet.

IE for the Mac does not "auto-clear" floats, and also does not support :after, and so is left out of the clearing party. What is to be done?
The .clearfix {display: inline-block;} is seen by all browsers, and fixes IE/Mac.
Other names
This hack is known as "clearfix hack", but sometimes it is referred to as “easy clearing hack”
Criticism
Perishable Press from February 5, 2008 offers some criticism of the method described above. Namely, the author of the post proposes replacing the dot with an empty space on the grounds that a pseudo-dot creates a stumbling block for certain browsers, including IE and Firefox. Secondly, he suggests adding a font-size: 0; property to the :after element, for no apparent reason but just as an extra precaution. Seems reasonable enough. Finally, he suggests getting rid of the CSS wildcard selector "*" in the * html .clearfix { height: 1%;} line. The reason for this is that the wildcard will set all fields to 1% height (for IE browsers, that is). For example, visitors using IE will be unable to leave comments because all of the form fields will be only 1 pixel tall!

Let us now incorporate his suggestions into our code. Here is what we finally get:

html, body, #wrap {height: 100%;}

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

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

#footer {position: relative;margin-top: -150px; height: 150px;clear:both;}

.clearfix:after {
content: " ";
display: block;
font-size: 0;
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 */
All of this is good, but they still don't tell us how to combine it with a multicolumn layout.
Yes, that's right. They don't. So lets try to fill in the blanks. Here is what we had in the previous section.

In the previous section, the structure was "header", "colmask", "footer", and all three columns fit nicely inside "colmask". So colmask was effectively playing the same role that "main" is playing now. So all we really need to do is to put the header and the colmask from the previous section under the newly-introduced "wrap" container division. So let's see what form our new code will now take.

HTML code for multi-column layout with clearfix hack


html
head title /title style type=text/css /style /head
body

div id="wrap"
div id="header" Header goes here /div (header)
...
div id="main" class="colmask threecol clearfix"
div class="colmid"
div class="colleft"
div class="col1"
Column 1 goes here
/div
div class="col2"
Column 2 goes here
/div
div class="col3"
Column 3 goes here
/div
/div (colleft)
/div (colmid)
...
/div (main colmask threecol clearfix)
/div (wrap)

div id="footer" Footer goes here /div (footer)

/body
/html

CSS code for clearfix hack



html, body, #wrap {height: 100%;}

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

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

#footer {position: relative;margin-top: -150px; height: 150px;clear:both;}

.clearfix:after {
content: " ";
display: block;
font-size:0;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;} /*seen by all browsers, fixes IE Mac*/
/* Hides from IE-mac \*/
html .clearfix { height: 1%;}/*hidden from IE Mac, seen by all other browsers*/
.clearfix {display: block;} /*and resets display to block*/
/* End hide from IE-mac */

CSS code for three-column layout:



body {margin:0; padding:0; border:0; background:#fff; width:100%; min-
width:600px; font-size:90%;}

a {color:#369;}

a:hover {color:#fff; background:#369; text-decoration:none;}

h1, h2, h3 {margin:.8em 0 .2em 0; padding:0; }

p {margin:.4em 0 .8em 0; padding:0; }

img {margin:10px 0 5px;}

#header { clear:both; float:left; width:100%; }

#header { border-bottom:1px solid #000; }

#header p,#header h1, #header h2 {padding:.4em 15px 0 15px; margin:0; }

#header ul {clear:left; float:left; width:100%; list-style:none; margin:10px 0 0 0;
padding:0; }

#header ul li {display:inline; list-style:none; margin:0; padding:0;}

#header ul li a {
display:block;float:left; margin:0 0 0 1px; padding:3px 10px;text-align:center;
background:#eee; color:#000; text-decoration:none;
position:relative; left:15px; line-height:1.3em;
}

#header ul li a:hover { background:#369; color:#fff; }

#header ul li a.active, #header ul li a.active:hover {color:#fff; background:#000;
font-weight:bold;}

#header ul li a span {display:block;}

#layoutdims { clear:both; background:#eee; border-top:4px solid #000;
margin:0; padding:6px 15px !important;
text-align:right;
}

.colmask {position:relative;clear:both; float:left;width:100%;overflow:hidden;}

.colright, .colmid, .colleft {float:left; width:100%; position:relative;}

.col1,.col2,.col3 {float:left; position:relative;padding:0 0 1em 0; overflow:hidden;
}

.threecol { background:#eee;}

.threecol .colmid { right:25%; background:#fff;}

.threecol .colleft { right:50%; background:#f4f4f4; }

.threecol .col1 {width:46%; left:102%;}

.threecol .col2 {width:21%; left:31%; }

.threecol .col3 { width:21%; left:85%; }

#footer { clear:both; float:left; width:100%; border-top:1px solid #000; }

#footer p {padding:10px; margin:0; }


CSS code for clearfix hack



1) html, body wrap tags
height:100%; //takes the whole screen
2) body > #wrap
This is only for "wrap" division under "body"

height: auto; min-height:100%;
This tells browser to take no less than 100% for the wrap division but take more space if needed (content longer than 1 page, for instance)

3) #main
This is column container
padding-bottom: 150px; /* footer will encroach into main's teritory */

4) #footer
Position it relative to normal location, keep away other floating elements

5) .clearfix:after
The ":after" pseudo-element can be used to insert some content after the content of an element.
The content property defines the content to be inserted.
In this example, the content is "." so that a dot will be inserted after each occurrence of a clearfix class.
This dot will be displayed as a block, will allow no text floating to the left or to the right, will have zeroheight, and, in addition, will be invisible.

6) .clearfix
clearfix itself is to be displayed as inline-block. This means the element will generate a block box, laid out as an inline box

7) html .clearfix { height: 1%;} and .clearfix {display: block;}
For Firefox and Chrome, let them know that clearfix is to be displayed as a block having a very small height.



CSS code for three-column layout



1) body tag
border:0; //This removes the border around the viewport in old versions of IE
min-width:600px; //Minimum width of layout - remove this line if not required
Note that the min-width property does not work in old versions of Internet
Explorer

2) layoutdims
This is 'widths' sub menu
padding:6px 15px !important;


3) .colmask
This is column container
position:relative; /* This fixes the IE7 overflow hidden bug */
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */


4) colright,colmid,colleft
Here we declare the common column settings
width:100% /* width of page */


5) col1,col2,col3
/* no left and right padding on columns, we just make them narrower instead
only padding top and bottom is included here, make it whatever value you need
*/


6) .threecol
background:#eee; /* right column background colour */


7) .threecol .colmid
right:25%; /* width of the right column */
background:#fff; /* center column background colour */


8) .threecol .colleft
right:50%; /* width of the middle column */
background:#f4f4f4; /* left column background colour */


9) .threecol .col1
width:46%; /* width of center column content (column width minus padding on
either side) */
left:102%; /* 100% plus left padding of center column */


10) .threecol .col2
width:21%; /* Width of left column content (column width minus padding on
either side) */
left:31%; /* width of (right column) plus (center column left and right
padding) plus (left column left padding) */


11) .threecol .col3
width:21%; /* Width of right column content (column width minus padding on
either side) */
left:85%; /* Please make note of the brackets here:*/
/* (100% - left column width) plus (center column left and right padding) plus (left
column left and right padding) plus (right column left padding) */
So let's test our new design. Did it work?

Previous