View Full Version : Gap between content and footer

09-16-2011, 10:54 AM
Hi everyone,

I'm getting a weird gap between my content and my footer on a bunch of my short pages and was wondering if anyone knew a fix to this? When the content runs over longer than what I can only assume is the length of the background image, it's fine.

However, on some other pages, the footer jumps up to meet the content on a short page and overlaps the background.

Here's a link to a page with the first problem:


and here's one to a page with the second problem:


Any help would be hugely appreciated :)

09-16-2011, 11:06 AM
OK, so what is your overall goal? To have a footer that 'sticks' to the bottom of the page? Your footer will naturally come up to meet the previous item because that is how pageflow works. Let me know what you want and we'll see what we can suggest :)

09-16-2011, 11:10 AM
Basically, when the page content is shorter than the monitor size will allow, I want the footer to automatically be at the bottom of the window. Unfortunately, I'm just learning about coding/design so I don't know if there's maybe a better way to design short pages?

09-16-2011, 11:15 AM
What you have done seems pretty good for a beginner :) I've seen far worse here, trust me!

I think member gentleone had a good tutorial for a 'sticky footer' let me mail him a minute.

09-16-2011, 11:25 AM
Aw thanks :D

09-16-2011, 11:41 AM
No problem. Have mailed gentleone so hope he will be along in a bit.

09-16-2011, 11:44 AM
Give me some time to see and test if the sticky footer is easy to implement on your existing page.

09-16-2011, 12:15 PM
The best way to implement a sticky footer is to start form the beginning of the development, because margins and paddings used on your existing page can have effect on the footer, so that it not will work how it's supposed to be.

Anyways we'll see about that later. First I want you to clean up your HTML, because there are double doctype, html, head and body tags on your pages. These will cause issues with the sticky footer for sure.

09-16-2011, 12:23 PM

What do you mean double doctype, head etc? Is it that I've used the same code twice in places? If you could give me an example, that's be great :)

09-16-2011, 12:53 PM
If you go into code view underneath your

<div class="Head2-Wrapper">
<div class="Head-Wrapper">
You have this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="../../Nav-Bar.css" media="screen" />
Delete that, but don't forget to move the link to your Nav-Bar.css to the top of your document.. just place it underneath your screen.css link.

Next one to delete is this... somewhere halfway your code

By the way... did you use php includes to include php pages? Because it could be then that you include whole pages including doctype, html, head and body tags instead of only the needed code snippets.

09-16-2011, 01:03 PM
Oh this is all so confusing to me :( I did use php includes to include php pages. Should I have just had the php in a document without having head/body tags - I also use divs to create the design in those separate pages so I don't know if I need to move that to my actual pages?

09-16-2011, 01:05 PM
Ah re-reading it I kind of see what you're saying now - yes I've included whole php pages in the includes (including new sets of head/body tags) - how do I fix that?

09-16-2011, 01:44 PM
you just include just what you normally would code there, thus in this case indeed without doctype, html, head and body tag

09-16-2011, 01:50 PM
Will the divs I use in them still work or do I need to put them in the main doc?

09-16-2011, 01:53 PM
If those divs are changing from id or class name keep them in the includes, but if they on every page the same then there is no need to.

09-20-2011, 10:28 AM
Hiya - so I've cleaned up my code and I found some code for a sticky footer online but it's just not working - help please :S This is the page I'm using it on:


09-20-2011, 10:48 AM
I still see double doctype, html, head, meta, title and body tags, which means they're still in your included menu page. Delete them!

Make sure that you also move the link to the stylesheet for your menu from your included menu page to the head of your main document.