Rodapé fixo ao fim, mas sobrepondo conteúdo principal.

Boa tarde/noite/dia.

Gostaria de pedir auxilio de vocês neste meu problema:

Criei um rodapé e o fixei ao fundo da página, porém dependendo do tamanho da resolução, esse rodapé sobe e cobre o conteúdo da página:

Estrutura.

<div id="tudo">
<div id="header"><div id="logo"><div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Ornamentos</a></li>
<li><a href="#">Quem Somos</a></li>
</ul></div></div></div>
<div id="logo2"></div>
<div id="Qualserv">Nossos serviços:</div>
<div id="imagemcentro" class="central" ><img class="paddingimg" src="imagens/ornamentos.png" width="378" height="292" alt="Ornamentos para festas" /><img class="paddingimg" src="imagens/designgrafico.png" width="378" height="292" alt="Design Gráfico" /></div>
<div id="footer"></div></div>

CSS

@charset "utf-8";
/ CSS Document /

#tudo {
height: 100%;
min-height: 100%;
position: relative;
}

body{

background:url(../imagens/pattern.jpg);
margin: 0px;
padding: 0px;
}

#header {
background:url(../imagens/Header_bg.jpg);
margin-top: 0px;
height: 39px;
margin-top: 0px;
padding: 0px;
margin-right: 0px;
margin-left: 0px;
padding: 0px;
}

#logo {
background:url(../imagens/logo1.png) no-repeat;
margin-top: 0px;
height: 39px;
margin-left: 100px;
padding: 0px;
}

#logo2 {
background:url(../imagens/logo2.png) no-repeat;
margin-top: 1px;
margin-left: 100px;
padding: 0px;
height: 149px;
}

#Qualserv {
margin-top: 20px;
font-size: 40px;
font-family: 'Leckerli One', "Arial Black", Gadget, sans-serif;
color: #cacaca ;
text-align: center;
text-shadow:2px 2px 2px #000000;
}

.central {
text-align: center;
margin-top: 20px;
height: 292px;
}

.paddingimg {
padding: 5px 5px 5px 5px;
}

#menu {
margin-top: 0px;
padding-top: 1px;
margin-left: 200px;
}

#menu ul {

margin-top: 8px;
list-style: none;
}

#menu ul li {

display: inline;
padding-left: 20px;
}

#menu ul li a {

font-size: 16px;
color: #cacaca;
font-family: 'Ubuntu', Georgia, "Times New Roman", Times, serif;
text-decoration: none;
text-shadow:2px 2px 2px #000000;
}

#menu ul li a:hover {

color: #e23f76;
text-shadow:2px 2px 2px #000000;
}

html, body {

height: 100%;
}

#footer {
position:absolute;
bottom: 0px;
background-image: url(../imagens/footer.jpg);
height: 129px;
width: 100%;
}

Há solução para este problema?