help with footer please

[swamprat27]

hello all,
i am knew to making websites. and dont really know to much html code, but i am trying to learn. I used frontpage to make my website. my problem is my footer does not continue down the page. it stays towards the top and the content runs under it, so you cant see the content in that spot. you can see the content after it has past the footer. any insight on fixing this problem would be great. thanks

site:
http://www.thefurbearer.com/dirt%20hole%20canine.html

[Andy]

Hi, the problem you mentioned is usually due to using the float attribute in in your CSS. This causes the floated elements such as content areas to be removed from the "flow" of elements stacking up down the page. They become invisible to later elements. To get your footer to go below these floated elements use: clear: both; in the footer ID CSS code.

[donecweb]

Hi swamprat27, I'm not sure but I too a look at your source and CSS the result being I suspect that you closed your content div after your footer which places the footer within the content area. Is there any special reason you are using position relative in your footer CSS. I also would suggest you try and organize your source a little better. You have so much white space (blank spaces) in your source that it pushes everything out of order making it hard to read. I must say the look of your site is quite good. I really like the color scheme and the layout that is intended.

[swamprat27]

I downloaded the template online, loaded it into frontpage, than added my content. im thinking the person who created the template might have done that. im assuming content div should be changed on every page, and is not in the styles sheet?

[Queen Bee]

I think this may have something to do with modifications that you have made to the template.
I went ahead and downloaded the original and opened it up in the browser. There is no overlap problem with the footer.

My recommendation would be to redesign the site using the original template. Because you did not design it from scratch, you will have a difficult time finding the problem... it would be easier to simply start over fresh, a simple copy-and-paste for the content. Avoid making changes to the CSS unless you really know what you're doing.

[Queen Bee]

I downloaded the template online, loaded it into frontpage, than added my content.

Hmm... I think this may be the problem. Frontpage is notorious for making unwanted changes to coding. Infact, if you check your webpages using the W3C validator, you will notice that it is full of errors: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.thefurbearer.com What you need to do is start over fresh (like I stated in my last message) and remake your website using Notepad ++, or equivalent. It is a high quality, free HTML/CSS editor that will leave the original coding intact.

For your needs, a simple knowledge of HTML and CSS is all that is necessary.
Tutorial on HTML:
http://www.w3schools.com/html/default.asp
Tutorial on XHTML:
http://www.w3schools.com/xhtml/default.asp
Tutorial on CSS:
http://www.w3schools.com/css/default.asp

That should do it.

[johnhask]

I agree with Tamuril that a quick education on any css changes is a good idea. For your footer, you may want to try an absolute positioning and a bottom margin of 0. This keeps the footer at the page bottom.

[Andy]

The problem is sure to be due to not clearing floating divs IMO as per my earlier post.