Need help, Sticking the footer.

[Shaye87]

I've googled, tried what's possible, still can't get it to work perfectly.
Footer keeps moving up and down depends what changes i make in my page (e.g deleting or adding text).
Once I get it not to move at all {great}, when i resize my IE window the footer go "on" the page's content... Here's the code, if anyone will be able to sort it out somehow that would be great.

css:

/* Footer */
#footer {
clear: both;
padding: 20px 50px;
border-top: 4px solid #788714;
background: #8E9C34;
}
#footer p {
width: 770px;
margin: 0 auto;
font-size: x-small;
color: #FFFFFF;
}
#footer a {
text-decoration: underline;
color: #FFFFFF;
}
#footer a:hover {
text-decoration: underline;
}
/* Footer > Legal */
#legal {
}
/* Footer > Links */
#links {
}

html:

<div id="footer">
<p id="links"><a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a></p>
</div>

Here is an examples of what I'm getting:
Whenever footer goes up and down:
http://img184.imageshack.us/my.php?image=50558689zh7.jpg
And when I change resolution/resizing IE window:
http://img184.imageshack.us/my.php?image=hatuhuz3.jpg

 

[AS_Platinum]

#footer {
	position: relative;
	margin-top: -1.5em
}

 

[Shaye87]

#footer {
	position: relative;
	margin-top: -1.5em
}

? did you test it? because it's not working... footer keeps going up/down etc.

 

[Shaye87]

I've now uploaded the full code, please see if you can assist.
HTML & CSS.

 

[AS_Platinum]

html, body {
	padding:0;
	margin:0;
	width:100%;
	height:100%;
             text-align:center;
}
#container {
	text-align: -moz-center;
	position: relative; 
	min-height: 100%; 
	height: auto !important; 
	height: 100%; 
	width:100%;
}