Footer and CSS

  Bedazzle 09:58 27 Oct 08
Locked

Hi

I've been trying to set my footer at the bottom of the page using CSS, but I'm having no luck :(

Currently, the footer is stuck at the top of the page behind the header - see here:

click here

This is the css:

click here

Could you tell me what the ideal CSS for this might be?

Cheers

  slightlymad 10:21 27 Oct 08

Can you repost?

Meanwhile, I'm guessing that you need to 'clear' the footer:

CSS:

.clear {clear: both}

HTML

<div id="footer" class="clear"><p>Copyright blah</p></div>

  Bedazzle 19:45 27 Oct 08

Sorry - here it is again.

Hi

I've been trying to set my footer at the bottom of the page (to sit just below the table) using CSS, but I'm having no luck :(

Currently, the footer is stuck at the top of the page behind the header - see here:

click here

This is the css:

click here

Could you tell me what the ideal CSS for this might be?

Cheers

  Kemistri 00:27 28 Oct 08

You should validate your mark up, because that will reveal the error that is causing your display issue. If you use the W3C validator, look for and fix the very last error in the list. Then fix all the others.

  Bedazzle 02:14 28 Oct 08

Ok, used the W3C validator and fixed the errors - I still have the footer sitting at the top of the page, though.

Please help...

  Eric10 12:38 28 Oct 08

Your stylesheet is full of "position absolute" and "z-index" declarations which are messing the whole thing up. Position absolute can be a useful tool but it shouldn't be used to replace the natural flow of the page.

As an experiment I removed all postion and z-index statments then reworked your page from the top down using just float, margin, padding and clear to push items into the correct place.
This is an image of the result. click here

  Kemistri 16:58 28 Oct 08

"Ok, used the W3C validator and fixed the errors - I still have the footer sitting at the top of the page, though."

When I took your mark up and fixed it, the footer was where you wanted it - ie, following the semantic order of the mark up.

Do some reading about semantic order, CSS positioning and how they relate.

  Bedazzle 22:48 28 Oct 08

Eric 10, that looks spot on - could you please post the css that used to get that?

Thanks for the help everyone.

  Bedazzle 01:24 29 Oct 08

Ok, the footer is now at bottom of the page, but at the moment if I increase the size of the table, the footer doesn't automatically adjust.

click here

click here

This thread is now locked and can not be replied to.

How to get Windows 10 for free | How to install Windows 10: There is still a way to avoid paying…

1995-2015: How technology has changed the world in 20 years

Alex Chinneck’s giant ice cube Christmas tree at Kings Cross

Apple rumours & predictions 2017: The iPhone 8, new iPads, and everything else you should expect fr7…