Gossamer Forum
Home : General : Internet Technologies :

css positioning - footer flush w/ bottom of page

Quote Reply
css positioning - footer flush w/ bottom of page
I've been banging my head against the wall on this one and just can't figure it out...

What I'm trying to do is have a css table class called "footer" that always appears flush with the bottom of the page... It's easy enough to set it to do that when the vertical content on the page is enough to fill the browser window, but in cases where there is not enough vertical content, I want the footer to jump down to the bottom of the window...

The closest I've come to solving this (and it isn't all that close) is by using:

Code:
table.footer {
position: absolute;
bottom: 0px;
margin: 0px;
padding: 0px;
}

That gets the job done for the "short" pages, but on the "tall" pages, the table appears at the bottom of the viewable window pane, instead of all the way at the bottom of the page...

It seems like this should be doable, but I just can't figure it out...

Does anybody have any ideas?

Many thanks,
Adam

Fractured Atlas :: Liberate the Artist
Services: Healthcare, Fiscal Sponsorship, Marketing, Education, The Emerging Artists Fund
Quote Reply
Re: [adamuforestasan] css positioning - footer flush w/ bottom of page In reply to
I've done it by using tables and HEIGHT="100%" in the table tag.

Which translates roughly into something like (many attributes left out):

<table height="100%">
<tr><td>
head & "guts" of your page here
</td></tr>
<tr><td>
footer goes here
</td></tr>
</table>
Quote Reply
Re: [Watts] css positioning - footer flush w/ bottom of page In reply to
You know, I think I tried that first, and for some reason it didn't work, and I just never went back to tinkering with it... But you inspired me to give it another go and it works perfectly now. So simple, really, I don't know why I was causing myself such unnecessary headaches...

Anyway, thanks a lot for your help.

Best regards,
Adam

Fractured Atlas :: Liberate the Artist
Services: Healthcare, Fiscal Sponsorship, Marketing, Education, The Emerging Artists Fund
Quote Reply
Re: [adamuforestasan] css positioning - footer flush w/ bottom of page In reply to
I've also been trying to do this...I was trying to get the search bar at the bottom of the GForum templates to sit flush on the bottom...I never found a solution ;(

Last edited by:

Paul: Apr 30, 2002, 3:31 PM
Quote Reply
Re: [Paul] css positioning - footer flush w/ bottom of page In reply to
I never did find a working solution with css - and I tried hard! - but the above solution with the all-encompassing <table height="100%"> tag seems to work fine, as long as everything is given valign="top" except the footer, which is set at valign="bottom"... So far, this solution, crude and old fashioned though it may be, is working perfectly for me.

Let me know if you ever find a css fix, please, as I'd love to hear about it.

Best regards,
Adam

Fractured Atlas :: Liberate the Artist
Services: Healthcare, Fiscal Sponsorship, Marketing, Education, The Emerging Artists Fund
Quote Reply
Re: [adamuforestasan] css positioning - footer flush w/ bottom of page In reply to
I spoke to a GT staff member whilst I was experimenting and it seems like Javascript is the way to go.

Just a shame my JS sucks like a baby with a dummy (or pasifier if you live on the "other side")

Last edited by:

Paul: Apr 30, 2002, 3:40 PM
Quote Reply
Re: [Paul] css positioning - footer flush w/ bottom of page In reply to
While I'm sure your JS falls short of your perl, I promise you that my JS sucks much harder... Wink

I wouldn't even know where to begin doing something like that with Javascript...

(I could be wrong, but it seems like "The Stone" is GT's foremost Javascripter... Maybe he (she?) could be cajoled into giving us a hint?)

Fractured Atlas :: Liberate the Artist
Services: Healthcare, Fiscal Sponsorship, Marketing, Education, The Emerging Artists Fund