Search code examples
htmlcssfootersticky-footer

Stumped by sticky footer - won't stop where intended

I'm using this 'version' of sticky footer: http://ryanfait.com/sticky-footer/

Here's where I'm trying to get this to work: http://www.ewsprojects.com/~lyons

I want it to stop at the end of the left column, but for whatever reason, I can't get it to stop before anything other than the header. Is there any way to make it stop after the left bar in the manner that is demonstrated in the first link?

Here's the CSS:

* {
margin: 0;
}

#container{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -40px;
}

#footer, .push{
height:40px;
width: 100%;
background: -moz-linear-gradient(top, #565656, #303030);
background: -webkit-gradient(linear, left top, left bottom, from(#565656), to(#303030));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#565656', endColorstr='#303030');
}

If you need me to provide any additional info, please let me know.

Solution

  • I'm assuming you want it to go no higher than the left column, but want it to stick to the bottom of the page if the page becomes taller?

    If that is the case then the reason the footer is allowed to go higher than the left column is because the left column is absolutely positioned. Because of this your container div has nothing forcing it to be a certain minimum height and so it becomes shorter than the left column when they browser window is smaller.

    Try this:

    • Add overflow: hidden; to your #container div
    • Add margin: 0 0 50px; to your #left_bar div
    • Make sure #container has margin: 0 0 -40px; (Sorry I told you to remove that before)
    • Remove the position, left and top rules from your #left_bar div
    • Remove the position rule from your #account_links div

    To be honest I'm not sure why you needed to absolute position a lot of this layout.

    Edit: I edited the list above because I missed some things.