Hi, I'm new to having a footer on my page. I've always just used a Header. But using a Footer is confusing me a lot.
I've managed to find a great template which I'm using but I'm still having some problems.

There is an annoying space between my header and the start of my content which I don't think should be there.

The main problem though is that the content and footer parts are overlapping each other.

This is the link to my site so you can see what I mean: http://www.ohmygawd.co.uk

This is my css code:

Code:
html,body {
	margin:0;
	padding:0;
	height:100%; /* needed for container min-height */
	background:#FFF;
	
	font-family:arial,sans-serif;
	font-size:small;
	color:#000;
}

h1 { 
	font:1.5em georgia,serif; 
	margin:0.5em 0;
}

h2 {
	font:1.25em georgia,serif; 
	margin:0 0 0.5em;
}
	h1, h2, a {
		color:#000;
	}

p { 
	line-height:1.5; 
	margin:0 0 1em;
}

div#container {
	position:relative; /* needed for footer positioning*/
	margin:0 auto; /* center, not in IE5 */
	width:1000px;
	background:#FFF;
	
	height:auto !important; /* real browsers */
	height:100%; /* IE6: treaded as min-height*/

	min-height:100%; /* real browsers */
}

div#header {
	border-bottom:0px;
}
	div#header p {
		font-style:italic;
		font-size:1.1em;
		margin:0;
	}

div#content {
	padding:1em 1em 5em;
	color:#000
}
	div#content p {
		text-align:justify;
		padding:0 1em;
		
	}

div#footer {
	position:absolute;
	width:100%;
	bottom:0; /* stick to bottom */
	background:#FFF;
	border-top:0px;
}
	div#footer p {
		padding:1em;
		margin:0;
	}