My Footer Floats

Question

I have been trying various \"sticky\" footer solutions for the better part of three days with no success. I seek to place the footer at the bottom of the browser window in i

Answer 1

The main idea behind sticky footer is that you make the content above the footer take up 100% of the viewport height.

The wrap then is forced to have a min-height of 100%, but also allows it to be taller than the height of the viewport if the content is longer than the size of the viewport.

The real trick is that at the bottom of the main div, you put padding that takes up the same amount of space as the footer's height. Then you set a negative top-margin on the footer to pull the div up into that space.

http://jsfiddle.net/6L4hE/

---

HTML

    

        
Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
    

CSS

/*  
Sticky Footer Solution
by Steve Hatcher 
http://stever.ca
http://www.cssstickyfooter.com
*/

* {margin:0;padding:0;} 

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body {height: 100%;}

#wrap {min-height: 100%;}

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

#footer {background-color: cornflowerblue;
    position: relative;
    margin-top: -180px; /* negative value of footer height */
    height: 180px;
    clear:both;} 

/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}