The Sometimes Elusive Footer

Need help creating a proper footer

[akoman]

Alright: I've tried a quick search of forum topics but I haven't found anything indicating why I'm getting the bug that I am.

An outline follows but to quickly examine:
<sorry, no personal URLs>

to see how i want it to look and click on MY PROBLEM to see what the problem scenario is.

Basically the objective is to have a
header
titlebar
i c
n o
d n
e t
x e
n
t
footer

unfortunately the footer slides up for some dumb reason:
d c
e o
x n
fotter

Be forewarned my CSS might be a bit messy: I've been trying to solve this problem in some pretty wacky ways and not quite returned the HTML/CSS to its proper original form.
[edited because I forgot no more than one space at a time :)]

[edited by: tedster at 11:15 pm (utc) on Oct. 21, 2002]

[tedster]

Hello, akoman. Welcome to WebmasterWorld!

My first suggestion is to use the W3C's online CSS validator [jigsaw.w3.org].

I think you may need to look at some of the div classes to be sure they're really doing what you intend.

I know it's more of a challenge to discuss these things when we disallow links to your page, but in the end we all learn more that way - including future members who haven't even shown up yet.

[mivox]

Personally, I just put an SSI call at the bottom of my content section to an external footer file... as long as you make sure the footer is called 'inline' relative to the content section (without any special positioning of its own), it should appear below the content as intended.

However, if your content section is offset to one side of the screen by a full height sidebar, the footer will be offset as well.

[akoman]

*blinks at tedsters comment*
*blinks at post*

!doh!

alrighty... first off.. I've seen you guys talking about SSI includes... and have NO idea what your talking about.

Secondly.. going to CSS validate now... should have done that first..

[mivox]

Do a site search (link at the top of this page) for "Server Side Includes"

Basically, you can make one footer file for your entire site, and the SSI call at the bottom of each page will tell the server to insert the footer file there whenever the page is requested. Saves a lot of time if/when you decide to edit the footer contents, as you only have to change one file for the whole site. :)

[akoman]

On SSI's:
Alright, the term server-side implies that the server has to do some work. Keep in mind this will most likely be set up on geocities or on a friends system (unlikely) who's willingness to set up software just so I can put a footer in is in question.

On CSS compat:
Well the CSS is fine, some niggling things like setting foreground and not background and vica versa...

Are SSIs really the only way? Why won't normal HTML/CSS markup accomplish the same things?

[keyplyr]

Are SSIs really the only way?

Another type of include sometimes used is JavaScript. Create a .txt file and name it footer.js containing....

document.writeln('each_line_of_code_to_be_written');
document.writeln('each_line_of_code_to_be_written');
document.writeln('each_line_of_code_to_be_written');
(and so on.....)

Then exactly where you want the footer, call it like this:
<script language="JavaScript" type="text/javascript" src="/scripts/footer.js"></script>

(notice I have the footer.js in a directory named "/scripts" but it can also be root level)

JavaScript Includes enjoy some of the same bennefits as Server Side Includes, in that they only need to be downloaded once, they lighten the page HTML, and they simplify editing. They also are served faster than SSI since they load with the page. Drawbacks are a small percentage of users disable JS.

[akoman]

Thanks for the JS hints keyplyr. They illuminated some previous design exploits which had muddy conclusions, and also helped me identify my problem.

It turns out that the fault lies in me positioning the content div absolutely. The fault for this lies in my current design.

The index on the left contains an image 210px wide. I wanted a 15px padding so I have a 240px wide index. Now if I want to use relative positioning to squish the content to the right of the index then I have to first set at least on of them to float, and the content pane has to have a width of (screen's width) - 240px (in my case 1152-240=912)

But what about 1024x768/800x600/or even the elusive 640x480?

Which is why I was using absolute positioning.. by positioning it at left: 240px with the width set to auto, the content automatically resized itself. But my footer doesn't work!

So I'm sort of chasing my own tail here.. advice? ditch the image? rework the design (it is kind of standard when I look at it..)? How to make other divs respect an absolutely positioned object? How to make a relatively positioned object automagically squish itself?

[SuzyUK]

akoman, I gave a reply to thread earlier today, which just might be your answer too...

[webmasterworld.com...]

Good Luck
Suzy

[akoman]

Ah yes. That was an issue for later: I pretty much decided to go about it the way you did... was hoping to avoid nesting divs but seems to be acceptable to all.

Question is:
When initally experimenting with the footer I had nested divs for the middle section (index and content) but the footer still behaved incorrectly.

[Nick_W]

Hmmmm... a few points:

• SSI - JS - PHP - ASP -Etc. Great for saving time but won't help a jot if the resultant html/css doesn't work. It doesn't change the way a page works in terms of the browser so it's not a solution.
  
• Absolute postioning: Here's the killer, it's damn near impossible to put a footer acroos absosolutely positioned divs at the bottom of your page. There is no good solution.
  

The answer

Compromise. Either rework your divs to use floats (your divs above the footer) and do something like this just beneath them in the html flow:

<div style="clear: both"></div>
<p id="footer">This will span your content divs now</p>

Or.....

Be content to have your footer confined to the width of your content div: Put the footer in your content div and give a whacking great top-margin so that on pages without much content it doesn't ride up the page and look silly ;)

Footer suck in CSS with absolute postioning, I usually settle for the content div approach. After all, it's only a footer right?

Nick

[akoman]

Whoop whoop. stupid div clearer works. Man thats dumb and hacky and kludgy. And here I was dreaming of super-clean, no useless kludgy tidbits.. (said with I'm Dreaming of a White Christmas in the background :)

"Be content to have your footer confined to the width of your content div: Put the footer in your content div and give a whacking great top-margin so that on pages without much content it doesn't ride up the page and look silly ;)"

ROFLMAO
surprisingly I was having this problem when trying the content-only footer. Didn't think of a big top margin tho :)

Thanks big-time all, I should be good now.

[Nick_W]

Your welcome. One more point:

Re: Kludgy.

I'm a clean code freak too ;) So I do this wherever possible:

hr {
clear: both;
}

blah blah end of content

<hr />

<p id="footer">blah</p>

Just a tiny bit better ;)

Nick

[akoman]

You ever feel real stupid? Then you know how I feel right now.

Surfing through my CSS and HTML trying out the middle nested div hack and discovered that I had tested Nick_W's hack out using my fixed-content-width/relative-positioning experiment (which works with or without the clearing div (my footer already tried to clear anyways..)

So exultations were in vain: the absolute positioning method result in the same behaviour, with or without clearing divs/clearing hrs.

After some more experimentation I finally got the middle div hack to work. Too many interfering parameters I figure.. if I float something left and give the content its to the left of then I should be fine floating the content right? Right?

Anyways it sort of works now.. the oddity is (especially odd after reading the thread submitted by SuzyUK) is that my div that holds the index and content doesn't seem to affect anything at all. I've tried fooling around with its bg-color but it never shows up...*sigh*

[SuzyUK]

akoman,

make sure that (1) all your brackets are curly! ;)

(2) then ensure that the nested divs (the ones within the "hack" div) are set to background color transparent to see if there's any changes going on..

can't think of anything else, unless you post new code for us to test

I find I don't need the clearing div's or hr's either, but I put in the <hr /> with the display set to none in the style sheet, so my div's are seperated in non css rendered format anyway

Suzy