Question

I am trying to create a bottom aligned, fluid width sticky footer that contains three links that are the same height as the container, which also have fluid widths.

I have created a top aligned version of this footer, where the links are not the full height of their container. It breaks if I set the bottom of the container to zero. I have put the code for this here:
http://jsfiddle.net/bHJR3/1/

How can I modify what I have so the bottom edge of the container is flush with the bottom of the window, and the links are the same height as the container?

I know how to do this through jquery but I am trying to avoid js if at all possible.

Thanks for any help.

EDIT:
Here’s a jquery solution I came up with in case of no answers if anybody wants to see it. http://jsfiddle.net/bHJR3/2/

Answer 1

The reason it broke when you set bottom: 0 on #footer is because everything inside #footer had position: absolute. Absolutely positioned elements do not take up any space in the document flow and will not cause their parent elements to expand to contain them. Setting a height on #footer solves this. Setting height: 100% on the a tags will cause them to size relative to their parent element. You can keep div.content, but you would also have to set height: 100% on it.

Add the following CSS to #footer:

bottom: 0;
height: 90px;

Add the following CSS to A:

height: 100%;
line-height: 90px; /* matches the height from #footer to vertically center the link text */

Remove div.content. It doesn’t seem necessary here.

Edit

You can center the footer by adding/changing the following CSS on #footer:

width: 640px;
left: 50%; /* positions left edge of #footer to center of page */
margin-left: -320px; /* pulls footer to the left (width / 2) * -1 */

Edit

You can use max-width and a media query to alter the styling of the footer if the window width is < 640px:

#footer {
    position: fixed;
    width: 100%;
    max-width: 640px;
    height: 114px;
    bottom:0;
    left: 50%;
    margin-left: -320px;
}

@media only screen and (max-width: 640px) {
    #footer {
        margin-left: auto;
        left: 0;
    }
}