Creating a footer

**drhowarddrfine** · Mar 8 '08, 08:08 PM

Hello, Michael. I remember you.

There is no such thing as 'position:norma l'. Do position:absolu te 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** · Mar 8 '08, 08:55 PM

Originally posted by drhowarddrfine

Hello, Michael. I remember you.

There is no such thing as 'position:norma l'. Do position:absolu te 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** · Mar 8 '08, 09:24 PM

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

**Michael7** · Mar 8 '08, 09:37 PM

Originally posted by drhowarddrfine

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:

404 Not Found

http://workmenforChrist.org/testindex.html

**GloStix** · Mar 9 '08, 12:54 AM

This is what I do, Put the footer div inside the container div, then put #footerorwtvthe nameis {
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** · Mar 9 '08, 02:37 AM

The problem lies in using position:absolu te 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:absolu te 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** · Mar 10 '08, 01:15 PM

Originally posted by drhowarddrfine

The problem lies in using position:absolu te 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:absolu te 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:absolu te 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** · Mar 10 '08, 04:14 PM

Yes. .

**Michael7** · Mar 12 '08, 07:06 PM

Originally posted by drhowarddrfine

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:relati ve 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** · Mar 13 '08, 04:01 PM

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:

404 Not Found

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** · Mar 14 '08, 07:14 PM

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:absol ute" 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

Creating a footer

Creating a footer

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment