Make my footer ALWAYS stay at the bottom

Hello,

I need to design a liquid layout so that as more text is added, the bottom footer moves down.

My layout works well if there is lots of text, but it does not work if there is little text.

https://filedb.experts-exchange.com/incoming/ee-stuff/4977-Demo.zip

How can I make the footer ALWAYS stay at the bottom?  If you download my example you will see my problem.

Thanks!
LVL 16
hankknightAsked:
Who is Participating?
 
Mark StegglesWeb DeveloperCommented:
Hey m8,

The basic idea is to have a div 100% height of the screen and then your footer comes after that div. The footer will have a negative top margin equivalent to its height. You would also have a bottom padding equivalent to the height of the footer, this would be set on a div inside the container.

<div id="container">
<div id="main">the page stuff</div>
</div>
<div id="footer">footer</div>


css would be like this

html, body {
height:100%;
min-height:100%;
}
div#container {
height:100%;
}
div#main {
padding-bottom:100px;
}
div#footer {
height:100px;
margin-top:-100px;
}

CHeers
0
 
hankknightAuthor Commented:
Thanks for your idea but it is still not working for me.

Check out my changes:

https://filedb.experts-exchange.com/incoming/ee-stuff/4981-Demo3.zip

What am I doing wrong?
Thanks.
0
 
hankknightAuthor Commented:
I have accepted your answer because it makes some good points and I have posted a related question here:
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_22886700.html
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.