Footer permanently at bottom of browser window

Get Started
1

Hi,

Please could anyone give me some simple HTML/CSS for creating a footer that always sits at the bottom of the browser window, even if the window is resized? Must work across Firefox/IE/Safari.

The footer must be able to contain some Flash and a navbar (unordered list).

Any help would be greatly appreciated.

Thanks,
Steve

2

I was getting ready to post this same question.

I’ve got a footer that works in IE but doesn’t in Mozilla?

Whats the CSS to fix this?

Thanks :slight_smile:

3

Suggest you read Paul’s sticky thread on the subject : http://www.sitepoint.com/forums/showpost.php?p=1239966&postcount=3

4

Define fixed. Must the footer ALWAYS be stuck at the bottom of the viewport, even if there’s enough content to push it aside normally, or do you want the footer to appear at the bottom of the viewport ONLY if there isn’t enough content to push it over, but to act normally if there is?

The former requires the use of position: fixed; (not supported natively in IE /5/6) whereas the latter requires some extra (and ingenious) markup. Both solutions can be found in the CSS FAQ at the top of the CSS board here on SitePoint (I’d link to it, but I have to head out to have a tooth extracted).

5

Thanks guys, have tried both these solution but still not what I’m looking for.

With the second solution:
i.e. http://www.sitepoint.com/forums/showpost.php?p=1239966&postcount=3

  • The footer has to sit beneath all other content. Whereas, I want the footer (which sits at the bottom of the first of three columns) to always appear at the bottom of the viewport, even if one of the other two columns stretches past the bottom of the viewport.

With the first solution:
i.e. http://www.sitepoint.com/forums/showpost.php?p=1239966&postcount=3

I tried the alternative which was positioning it at the bottom of the first column, but this does not seem to re-size depending on the size of the viewport.

Do I need a javascript solution? Just to re-iterate, I have a 3 column layout, the footer is at the bottom of the first column. The footer should always display in the bottom left of the viewport when the browser window is resized, no matter what the length of any of the 3 columns is.

Any help greatly appreciated.

Thanks,
Steve

6

One solution is what Dan has previously said using position fixed.

#footer {
position:fixed;
bottom:0;
left:0;
}

For IE6 and earlier you can use IE-expressions to simulate fixed positioning.

http://www.gunlaug.no/contents/wd_additions_15.html

See under the heading “element fixed to bottom of viewport”

Alan

7