Footer isn't acting as footer?! - Webmaster Forums - Webmaster forum for HTML, PHP, ASP, CSS and more

Alpha_Plus · 10-23-2008, 12:16 AM

Hi,

I've got a footer on my page that should be at the bottom of the page, but instead it sits just under the bottom of the navigation bar, which is fine when there is little text on the page, but if there is an overflow of text, the footer just sits on top of it or below it - depending on 'position'.

This is my CSS code for the footer:

#footer {
color: #fff;
text-align: center;
width: 800px;
display: block;
padding-top: 3px;
height: 45px;
background: url(../../images/footer.png) repeat-x;
float: right;
position: relative;
border-top: 2px solid #000;
font: 14px "Helvetica Neue";
}

I've also posted a screenshot I'm hosting on my other site, as this isn't live at the moment. It won't be there forever.

Any ideas on how to get it at the bottom of the page?

fnacotton · 10-23-2008, 07:40 PM

If your side navigation is floated, it is removed from the normal flow of the document. In order to make sure your footer is below all floated content, add

Code:

clear: both;

to your footer style.

Look at this link, it's for a sticky footer, which puts the footer at the bottom of the page always, and allows for it to be pushed down if there is scrolling. footer at bottom of page.

Alpha_Plus · 10-23-2008, 09:47 PM

clear: both; doesn't work.

The side navigation is floated to the left but the text on the right isn't floated at all. Could that be why "clear: both;" doesn't work?

That link doesn't work much either - it stuffs up everything.

fnacotton · 10-23-2008, 11:00 PM

Why are you floating your footer?

pathfinder_05 · 10-24-2008, 07:25 AM

I had an issue similar... I forgot to put a 'div' ending to the 'body' or 'main' in my html ..... so it didn't know where the start of the footer was! Duh!

DB