Scrolling footer when sliding down a link.. (2 weeks issue, need help)

[MrXortex]

G'day trying to fix this issue for over 2 weeks now.

I have made a footer but can't get it right to the bottom.. The problem is I have a slider that slides down to get some information. I want the footer to slide down with it too, I want the footer to be at the bottom, it should resize by itself, like if a person has a 22" monitor it should stay at the bottom and if the person has a 15" monitor is should do the same.

But I don't want the position:fixed; some of the text gets hidden behind the footer.

Just want it at the bottom.. like it should be able to scroll down too when slider is activated.

The image will explain everything I guess.

http://i.imgur.com/ASt7G.png

Code:

HTML:

<div class="footer_gray">
    <div class="inner_footer">
        <div class="footer_right">
            <p>For feedback or support: admin
        </div>
      <div class="footer_left">
        <p>Copyright © 2012<p>
    </div>
    </div>
</div>

THE CSS:

.footer_gray{

    padding: 10px;
    background: #CCC;
    text-align: center;
    line-height: 35px;
    color: #D4D4D4;
    font-size: 13px;
    text-align: center;
    text-shadow: white 0 1px 0;
    overflow: hidden;
    margin-top: 80px;
    position: relative;

    background-color: #F5F5F5;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#F5F5F5), to(#FAFAFA));
    background-image: -webkit-linear-gradient(top, #F5F5F5, #FAFAFA);
    background-image:    -moz-linear-gradient(top, #F5F5F5, #FAFAFA);
    background-image:      -o-linear-gradient(top, #F5F5F5, #FAFAFA);
    background-image:         linear-gradient(to bottom, #F5F5F5, #FAFAFA);

    border-top: 1px solid #EBEBEB;
}

Your help will be highly appreciated!

Thank you.

[urtrivedi]

try to add following css styles to ur footer

bottom:0px;
z-index:50;
position:fixed;

[MrXortex]

Looks okay.. but its still cut and its all the way to the left.
http://i.imgur.com/CXavC.png

[AleMonteiro]

Let me see if I understand: Even if the page doesn't fill the body height, you want the footer to be at the bottom. And when the page fill the body height, or get bigger than it, you want the footer to stay at the bottom of the page (bottom of the page, not bottom of the window).

Is that right?

[MrXortex]

Yes.. I want it to be at the bottom of the page.

[urtrivedi]

add this 2 also
left: 0px;
width: 100%;

[MrXortex]

Nothing happened.. its just the same. :/

[urtrivedi]

are u keeping it (footergray in body or its in another div)

[MrXortex]

Alright, I managed to make it work.. but when I scroll down.. the footer stays fixed. How do I remove that fixed position and it show only at the bottom (like when you scroll at the bottom.

[tscina]

have you tried

position:absolute;
bottom:0;

[designershiv]

It simple buddy, give position relative to parent div of the footer and then give footer :

{
position : absolute;
top:0px; 
left: 0px;
}