Creating a footer

[Michael7]

Hi everyone,

Me again, been a while since I've been here, but I'm back again needing help with a simple thing.

I've searched for help on creating a footer, but all the help I've found, was absolutely nothing like what I was looking for.

Could anyone help me with the very simple issue of creating a footer?

I'm trying to create it on my index page (and all of the others, once I figure out HOW :) )
Here is the page:
http://workmenforChrist.org

I thought I knew, but I guess I don't. The code I tried last, to style the footer (and by footer I mean both copywrite info, and the actual footer. The copywrite will be on my sidebar, and the footer on the regular part of the page, if anyone understand that) is this:
[HTML]
/*Bottom container for copywrite and footer*/
.bottom {
position: normal;
bottom: 0px;
overflow: auto;
}

/*Copywrite info*/
.copywrite {
font-size: 75%;
font-family: Arial;
width: 155px;
float: left;
}

/*Footer*/
.footer {
font-weight: bold;
font-size: 50%;
font-family: Arial;
min-width: 600px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
padding: 31px;
}[/HTML]

I want both footer and copywrite info to be at the bottom, so I put them in box of their own. But of course, that doesn't solve the problem of my footer ignoring my page and going to the top instead of bottom.

I really appreciate the help in this simple matter, and appologize for my ignorance. Also, I know I have a few problems with my page, I'm currently updating and fixing things so they'll be fixed after a while, but right now I'm just focusing on the big chunks that are more needed.

Thanks again!

~Michael

[drhowarddrfine]

Hello, Michael. I remember you.

There is no such thing as 'position:normal'. Do position:absolute instead.

If you don't see the footer after that, trying 'margin-bottom:-2em' because it might slip below the bottom of the browser. (Or is it margin-top?).

Two html errors:
line 69 column 5 - Error: start tag for "LI" omitted, but its declaration does not permit this
line 107 column 3 - Error: end tag for element "P" which is not open

[Michael7]

Hello, Michael. I remember you.

There is no such thing as 'position:normal'. Do position:absolute instead.

If you don't see the footer after that, trying 'margin-bottom:-2em' because it might slip below the bottom of the browser. (Or is it margin-top?).

Two html errors:
line 69 column 5 - Error: start tag for "LI" omitted, but its declaration does not permit this
line 107 column 3 - Error: end tag for element "P" which is not open

Hi drhowarddrfine! Glad to have your help with this, you've always been a great help :)

Wow, I don't know where I had heard of the position:normal. I thought I heard something about how it puts it in the normal flow of the page (first comes first, second and so forth). Thanks for letting me know it doesn't exist!

As for the footer, I tried position: absolute, and all that does is put it on the top of the page, on top of the header.

Adding 'margin-bottom: -2em' does put it on the bottom, but only on the bottom of the viewable area and not the bottom of the actual page.

Putting a DIV for the entire page, so that it contains EVERYTHING, won't help in some way, will it?

[drhowarddrfine]

Put it at the top? Did you leave in 'bottom:0'?

[Michael7]

Put it at the top? Did you leave in 'bottom:0'?

Hmm . . . yes, though I had 'bottom:0px' which just to make sure, I removed the 'px' part and tested it. It's still now going to the bottom but only the bottom of the viewable space and not the actual bottom of the page.

I uploaded a test page to help see what I see. Here's the page if it helps:
http://workmenforChrist.org/testindex.html

[GloStix]

This is what I do, Put the footer div inside the container div, then put #footerorwtvthenameis {
float:inherit;
}

That keeps it at the bottom of the page.

I don't know if that's what you're looking for or not.

[drhowarddrfine]

The problem lies in using position:absolute and, possibly, floats. You have to keep in mind that both remove an element from the normal flow and allow them to float up to their parent container. As an example, remove position:absolute from '.bottom' and see what happens.

Also, there is no such thing as position:normal.

That's all I have time for right now.

[Michael7]

The problem lies in using position:absolute and, possibly, floats. You have to keep in mind that both remove an element from the normal flow and allow them to float up to their parent container. As an example, remove position:absolute from '.bottom' and see what happens.

Also, there is no such thing as position:normal.

That's all I have time for right now.

I was worried about that . . . I have position:absolute for the main part of my page, in order to position it correctly off the sidebar menu. So that may be causing the '.bottom' to go to the top instead of AFTER the main part. Right?

[drhowarddrfine]

Yes. .

[Michael7]

Yes. .

Alrighty, back again. Sorry for the delay...

I always knew absolute would pose a problem somewhere along the line . . .

Okay, so, does putting 'position: relative' in place of absolute (with the 'left:190px' to keep it off the sidebar) for my main-page div . . . would that cause any problems. So far it doesn't appear to cause any issues, but are there any that are known to happen in a particular situation?

EDITED TO ADD:

A new problem seems to be occuring. Though I still want to make sure the question about position:relative is answered . . . I have the problem of my footer going to the next line when the window is resized. This was a problem with my two index boxes that we dealt with a while back here, but adding 'overflow:auto' doesn't work in this case.

I can't have the copyright resize, but the footer can resize accordingly . . . But I would think it should work. The only thing I have different from the index box, is pretty much the resizing in percent . . .

[Michael7]

I hope this isn't wrong to post again (if it counts as double-posting), but I've a different problem.

To fix my above problem I stopped floating my footer and just set it to relative and left:190 like the main part of the page. I don't know if that will pose problem, but it seems to work right.

However I have a different problem and I wanted to post it in this thread instead of starting a whole new one, because it relates to my footer.

If anyone can go to the test page above, they can see how my footer is positioned how I want it, with a margin on the top to separate it from the rest of the main part of the page, and the "left:190" keeping it off the sidebar.

However, I can't seem to get my copyright to go to the bottom of the container div. It stays on the top left. I need it to be on the bottom left!

I've tried all sorts of things. I have to keep it floating left because otherwise my footer goes to the next line, when I pretty much need both footer and copyright on one line. Putting "bottom:0" doesn't work either. Nor do any "vertical-align" properties work.

There has to be a way to do this, does anyone have a solution? I greatly appreciate the help! (I have the borders on, to better see what's going on with the positioning of the divs. They're only there to temporarily help.) Thank you again,

EDITED:
Test page, to make it easier:
http://workmenforChrist.org/testindex.html
AND . . . In IE the "left:190px;" causes it to go left from the copyright div instead of the page itself! Is there a fix to this?

~Michael

[Michael7]

I Deeply apologize . . . I couldn't seem to edit my last post.

But, the problems I was having seem to be solved! I tested it on IE, FF, and Opera and they seemed to work correctly, so . . .

And to get rid of that float bug with IE, I set the "margin-left: 190;" instead, and it worked. I don't think that's the official way to solve that bug, but I found none and this one seems to work.

Then to deal with the issue of having my copyright go to the bottom of the containing div, I actually had to remove the "float:left" and instead changed the container div to "position: relative;" and then the copyright div to "position:absolute" and "bottom:0" and "left:0". The problem with absolute before, was because of that container div . . .

Then, I also had to create another container div, for both the sidebar AND main part of the page, excluding the copyright/footer divs. This helped so that if the sidebar menu were longer than the main part of the page, the copyright/footer would stay after the sidebar menu and not skip up to the bottom of the main page. I hope this is not getting excessive with these container divs, because I don't know of any other way!

I'm explaining all this, so that if someone happens along the thread looking for a solution to the same problem, they'll know what the end result was.

Also in the case that one of you more knowledgeable ones might see some unforeseen problems this may cause, and offer a better solution.

Thank you again, everyone, for the help, and God Bless!

~Michael