Moving Footer

[0perator]

Website is made for a charity, but I can't seem to get the footer to stay at the bottom of the page. I don't want it so it stays at the bottom of the frame because then it just stays static when you scroll, but at the moment it is suspended in the middle of the page, but in my 800 x 600 resolution it looks fine! Just doesn't in anything else major frustration, can anyone help please?

 

Footer HTML:

 

</div>
	</div>
	<div class="clearfooter">
	<div id="footer">
	<p><a href="http://www.cqc.org.uk/guidanceforprofessionals/socialcare/careproviders/inspection/ratingsandreports/qualityratings/ratingsrules.cfm#2">CQC Regulatory Body</a>  • 
		<a href="http://62.73.173.233/CSCI/DCA/20/ES0000072120.V2000008163.R01.S.pdf">View Our Report</a>  • 
		<a href="cons.html">Newsletter</a>  • 
		<a href="contact.html">Contact</a><br>
		Company Registration Number: 6490650   •  VAT Number Issued: 724545240</p>
	</div>

</body>
</html>

 

CSS:

 

* {
border:0;
margin:0;
padding:0;
}
.left {
float:left;
padding:0 10px 0 0;
}
.right {
float:right;
padding:0 0 0 10px;
}
a {
color:#01a5ec;
text-decoration:none;
}
a:hover {
color:#666;
text-decoration:underline;
}
p {
padding:0 0 10px;
}
.clearer
{
clear: both;
display: block;
height: 1px;
margin-bottom: -1px;
font-size: 1px;
height: 100%;
line-height: 1px;
}

html
{
	height: 100%;
}

body
{
	min-height: 100%;
}

#content, main
{
	position: relative;
	min-height: 100%;
}

* html #page
{
	height: 100%;
}

#footer
{
	position: absolute;
	bottom: 0;
}
/* body */
html, body {
background:#0070b8 url('images/background_body.jpg') center repeat-y;
color:#666;
height: auto;
font:12px "Trebuchet ms", Helvetica, sans-serif;
}

/* header */
#header {
background:#0070b8 url('images/background_header.jpg') center no-repeat;
height:100px;
margin:0 auto;
width:548px;
}
#header h1 {
color:#fff;
display:block;
font:32px "Trebuchet MS",Verdana,sans-serif;
padding:50px 0 0 25px;
}
.clearfooter {
   height: 4em;
   clear: both;
}
.dent{
padding-left: 25px;
}
#header h1 span {
color:orange;
}

/* content */
#content {
margin:0 auto;
width: 550px;
        height: auto !important;
        height: 100%;
        margin-bottom: -50px;
        position: relative;
}
#content h1 {
color:#01a5ec;
font:18px Verdana,sans-serif;
margin:15px 0 5px 0;
}
#main {
float:left;
padding:10px 10px 0 10px;
/*width:335px;*/
height: 100%;
position:relative;
}
#sidebar {
width:160px;
float:right;
padding:15px;
}
#sidebar .navigation {
list-style:none;
}
#sidebar .navigation li {
list-style:none;
}

/* footer */
#block{
height: auto;
}
#footer {
background:url('images/background_footer.jpg') center no-repeat;
clear:both;
        position: relative;
bottom:0;
height:50px;
margin:0 auto;
text-align:center;
width:100%;
}
#footer p {
color:#666;
line-height:18px;
padding:7px 0 0
}

/* form elements */
form {
margin: -6px 0px; 
padding: 0;
background: #;	
}
label {
display:block;
font-weight:bold;
margin:5px 0;
}
input {
padding: 2px;
border:2px solid lightblue;
font:12px "Trebuchet ms", Helvetica, sans-serif;
color:#777;
}
textarea {
width: 400px;
padding:2px;
font:12px "Trebuchet ms", Helvetica, sans-serif;
border:2px solid lightblue;
height:100px;
display:block;
color:#777;
}
input.button { 
margin: 0; 
font:12px "Trebuchet ms", Helvetica, sans-serif;
border: 2px solid lightgrey;
background: #FFF; 
padding: 2px 3px; 
color: #333;	
}

[jcombs_31]

A screenshot or sample page would be nice.  For one thing, you are not closing <div class="clearfooter">.  I don't quite understand your explanation though.

[haku]

lets see your page.

[0perator]

theres the pic as you can see the footer is just below the text

[jcombs_31]

Do a google search for sticky footer, there are a few methods that describe what you want.

 

http://www.google.com/search?q=sticky+footer&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a&safe=active

[Dorky]

clear has an effect on margins.

clear: both;

you can just put clearfooter inside another div. make that div relative. make its width: 100%; then make your clearfooter, margin-left:auto; margin-right:auto; to center it.