Problemas com rodapé no final da página

Olá a todos!

Meu problema é o seguinte: meu rodapé fica com espaço sobrando em baixo quando a página tem pouco conteúdo. Queria fazer com que ele sempre topasse em baixo. Pesquisei na net e só achei soluções com postion absolute ou fixed que não resolveram meu problema, pq o rodapé ficava fixo e atrapalhava os outros elementos da página.

HTML

<div id="footer">
 <div id="footer-wrap">
 <div id="slide">
 <ul>
 <a href="#"><li id="design" class="active">web design</li></a>
 <a href="#"><li id="marketing">web marketing</li></a>
 <a href="#"><li id="mobile">web mobile</li></a>
 <a href="#"><li id="social">web social</li></a>
 </ul>
 <div id="design" class="cont">
 <img src="<?php bloginfo( 'template_url' ); ?>/images/design.png" />
 </div>
 <div id="marketing" class="cont">
 <img src="<?php bloginfo( 'template_url' ); ?>/images/marketing.png" />
 </div>
 <div id="mobile" class="cont">
 <img src="<?php bloginfo( 'template_url' ); ?>/images/mobile.png" />
 </div>
 <div id="social" class="cont">
 <img src="<?php bloginfo( 'template_url' ); ?>/images/social.png" />
 </div>
 </div><!-- slide -->
 <div id="feedback">
 <h1>feedback</h1>
 <ul id="social">
 <a href="#"><li id="twitter">twitter</li></a>
 <a href="#"><li id="facebook">facebook</li></a>
 <a href="#"><li id="orkut">orkut</li></a>
 <a href="#"><li id="flickr">flickr</li></a>
 <a href="#"><li id="linkedin">linkedin</li></a>
 <a href="#"><li id="rss">rss</li></a>
 </ul><!-- social -->
 <div style="clear:both"></div>
 <ul>
 <li><input value="Digite aqui seu nome" /></li>
 <li><input value="Digite aqui seu e-mail" /></li>
 <li><textarea>Digite aqui a mensagem</textarea><input type="button" class="button" value="enviar" /></li>
 </ul>
 </div><!-- feedback -->
 <!-- tabs -->
 <script>
 $(function() {

 $("#slide").tabs("div.cont", {event:'mouseover'});
 });
 </script>
 </div><!-- footer-wrap -->
 </div><!-- footer -->
 <div id="final">
 <div id="wrap">
 <div id="selo" title="Midiaweb.net, inovações para o mundo digital">
 midiaweb.net, inovações para o mundo digital
 </div><!-- selo -->
 <ul>
 <li>
 <div id="search">
 <form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
 <input type="text" class="field" name="s" id="s" placeholder="<?php esc_attr_e( 'Busca', 'midiaweb' ); ?>" />
 <input type="submit" class="submit" name="submit" id="searchsubmit" value="<?php esc_attr_e( 'OK', 'midiaweb' ); ?>" />
 </form>
 </div><!-- search -->
 </li>
 <li>versão desktop</li>
 <li>versão mobile</li>
 <li>mapa do site</li>
 <li>acessibilidade</li>
 <li>privacidade</li>
 </ul>
 <div style="clear:both"></div>
 </div><!-- wrap -->
 </div><!-- final -->

CSS

#footer {
width:100%;
height:204px;
clear:both;
}
#footer-wrap {
width:960px;
margin:0 auto;
display:table;
}
#final {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background-color:#ddddd8;
border-top:3px solid #dadad5;
color:#9a9a9a;
}

#final #wrap {

width:960px;
margin:0 auto;
height:30px;
padding-top:6px;
}