Question:

I'm trying to make my footer stick to the bottom of the page . pages of my site is not at the same height . I tried every thing on the web but nothing worked when zoom in\out or resizing browser window it jambs with the browser and floats in the middle of my divs , tables , ..etc here's the original footer css :

#footer { width:100%; height:20px; vertical-align:middle; font-size:10px; font-weight:bold; } #footer ul { margin-top:10px; margin-right:10px; margin-left:30px; color: #797979; line-height:11px; } #footer ul li { float:left; border-right:1px solid #797979; list-style:none; margin:0 5px 5px 0; padding-right: 5px; } #footer ul li a { color: #797979; text-decoration:none; } #footer ul li a:hover { text-decoration:underline; } #footer .copyright { margin-top:5px; float:none; text-align:center; }

and html looks like :

<div id='main'> <div id='header'> </div> <form id='myform'> <div id='form_div'> </div> </form> <div id='footer'> </div> </div>

and here's all methods I've tried :

<a href="http://www.lwis.net/journal/2008/02/08/pure-css-sticky-footer/" rel="nofollow">http://www.lwis.net/journal/2008/02/08/pure-css-sticky-footer/</a>

<a href="http://www.cssstickyfooter.com/" rel="nofollow">http://www.cssstickyfooter.com/</a>

<a href="http://alistapart.com/article/footers" rel="nofollow">http://alistapart.com/article/footers</a>

<a href="http://blog.softlayer.com/2012/tips-and-tricks-pure-css-sticky-footers/" rel="nofollow">http://blog.softlayer.com/2012/tips-and-tricks-pure-css-sticky-footers/</a>

and many others ...

I tried to put :

#footer { bottom:0; position: fixed }

it sticks with this but of course when resizing browser it's not seems there's a problem in css p.s : I'm not the one who wrote it I'm just using it and trying to fix it

Try Ryan Fait's <strong><a href="http://ryanfait.com/sticky-footer/" rel="nofollow">sticky footer</a></strong>. It's incredibly simple and cross-browser compatible.