Calculate current position

@JSchwarzOct 19.2005

I have a footer which needs to be positioned at the bottom of the browser’s window, or at the bottom of the displayed page, whichever is lower.

In other words, if the page’s contents don’t take up the entire window, then the footer should be at the bottom of the window. If there is a lot of content, and the page has to be scrolled, then the footer should be at the bottom of the page.

Problem: I have no idea how to do this. For instance, how do you get the footer’s current location?

Please help me, I’m stumped. Thanks in advance.
-Jeff

The footer code:

[CODE]<table id=”CGfooter” cellpadding=”0″ cellspacing=”0″ border=”0″ width=”100%” style=”border:0 solid red”> <tr><td valign=”top” ><img src=”spacer.gif?OpenImageResource” height=”1″ width=”14″ border=”0″ /></td> <td valign=”top” colspan=”2″ bgcolor=”#cccccc”><img src=”spacer.gif?OpenImageResource” height=”1″ width=”1″ border=”0″ /></td> <td valign=”top” ><img src=”spacer.gif?OpenImageResource” height=”1″ width=”14″ border=”0″ /></td></tr> <tr><td valign=”top” colspan=”3″><img src=”spacer.gif?OpenImageResource” height=”5″ width=”1″ border=”0″ /></td></tr> <tr><td valign=”top”> </td> <td valign=”top” align=”left” class=”menuheadfootleft”><font face=”arial, helvetica” size=”1″><a href=”http://www.citigroup.com/”><img src=”f_cglogo.gif?OpenImageResource” alt=”citigroup” border=”0″ /></a><br /> <a href=”http://www.citigroup.com”>http://www.citigroup.com</a> </td> <td valign=”top” align=”right” class=”menuheadfootright”><font face=”arial, helvetica” size=”1″><a href=”http://www.citigroup.com/citigroup/privacy/terms.htm”>Terms, conditions, caveats, and small print</a><br />Copyright © ‘ + copyrightdate + ‘ Citigroup</font></td></tr> <tr><td valign=”top”><img src=”spacer.gif?OpenImageResource” height=”1″ width=”10″ border=”0″ /></td><td valign=”top” colspan=”2″ class=”fineleft”>This site is not intended for distribution to, or use by, any person or entity in any jurisdiction<br />or country where such distribution or use would be contrary to local law or regulation.</td></tr></table>[/CODE]

to post a comment

CSS

6 Comments(s) _↴

@KravvitzOct 20.2005 — #http://www.alistapart.com/articles/footers/

@JSchwarzauthorOct 20.2005 — #Thanks for the link. Reading up on it now.

@JSchwarzauthorOct 24.2005 — #I followed the directions in that article (great article; thanks) and I have it working almost perfect. I just have two wierd problems I can't resolve.

First is that if the window is small enough, the content is hidden behind the footer. But the footer is supposed to stay below all of the content. In my case, the footer is at the bottom of the browser window, but doesn't move down when the content is longer than that. The examples in the article work, but mine doesn't.

The second, even wierder problem is that whenever I resize the window vertically, the content disappears. If I size the window horizontally, it comes back.

Here's my page to see the problem: http://clearyaccess.cgsh.com/Business/CVPrivacySurveyHome.nsf/ClientHome?open

And here is the relevant HTML code:

[code=html]<div id="container">
 <div id="content">
 <table id=outtertable width="100%" cellpadding="0" cellspacing="0">
 ... content ... content ... content ...
 </table>
 </div id="content">
 <div id="footer">
 <table id="CGfooter" cellpadding="0" cellspacing="0" border="0" width="100%">
 ... footer ...
 </table>
 </div id="footer">
 </div id="container">[/code]

Here is the relevant CSS code:

[CODE]body {
 margin: 0;
 height: 100%
 }
 #container {
 position: relative;
 min-height: 100%;
 }
 #content {
 visibility:visible;
 padding-bottom: 20px;
 }
 #footer {
 position: absolute;
 bottom: 0;
 }
 table#CGfooter {position:relative; top:0px; }[/CODE]

Why is the content displaying behind the footer, and why does the content disappear if I resize the window vertically?

Thanks for any help!

-Jeff

@JSchwarzauthorOct 24.2005 — #I found out that by adding "position: absolute;" to the definition for #content, I got rid of the disappearing content. So that part is resolved.

I also determined that the content disappearing behind the footer and coming out the bottom of the footer appears to be identical to the setting "overflow: auto". Setting overflow to 'visible' or 'hidden' makes content go behind the footer, but never re-emerges.

So what's happening is that the footer is anchoring itself to the bottom of the browser window, regardless of the size of the content. If the content is longer than the window, the footer does not move down.

How do I make the footer move down to the bottom of the content, but still keep it at the bottom of the window if the content doesn't fill the window.

I appreciate all help. Thanks,

-Jeff

@JSchwarzauthorOct 25.2005 — #I need this thing at the top to make it work right:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">

I have no idea what that means, but it makes the app work the way I want.

Extra credit for anyone who can explain that command.

@KravvitzOct 25.2005 — #That's a doctype. A complete one puts browsers in Strict Mode.

http://www.hut.fi/u/hsivonen/doctype

http://www.alistapart.com/articles/doctype/

http://www.juicystudio.com/choosing-doctype/

http://www.w3.org/QA/2002/04/valid-dtd-list.html

Also in #CSS _↴

Adding vbcrlf seems to add margins to links Frustrated Layout differences in IE6, IE7 and FF.

Success!

Help @JSchwarz spread the word by sharing this article on Twitter...

Tweet This

Calculate current position

6 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Calculate current position

6 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #CSS _↴