Bottom of Window

We can modify the stylesheet that centred our content vertically to align part of our content to the bottom of the window for those browsers that allow vertical positioning.

Here is the stylesheet commands required do this:

<style type="text/css">
body, html {height: 100%;}
#footer[id] {position:fixed; display: table; height: 99%; top:0;}
<!--[if lte IE 7]><style type="text/css">
#footer {position:absolute; top: 99%;}
#fcell {position: relative; top: -100%;}

It is now a simple matter to enclose all of the content that we want aligned to the bottom of the page within two div tags like this:

<div id="footer"><div id="fcell">
our content to go at the bottom of the screen goes here

This sample page shows you what a page with some bottom aligned text looks like in your browser.

Note that this positions the block at the bottom of the window when the page first loads. The block remains at the bottom of the page in all browsers except for Internet Explorer which scrolls the content along with the page. To be able to fix the content at the bottom of the screen in IE requires the use of Javascript as IE requires abcolute positioning in order to align to the bottom of the screen and there is then no way to apply fixed positioning to keep it there.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow