Footer is not positioned at the bottom of the page

My css:

#rodape {
    position:absolute;
    bottom: 0;
}

.RodapeFaleConosco {
    float:right;
}

.RodapeTermoPolitica {
    float: left;
}

Now my code in jquery to load html

str += '<div id="rodape">';
                    str += '<div id="dvFaleConosco" class="RodapeFaleConosco">';
                    str += '<a href="../FaleConosco.aspx">';
                    str += '<img src="Images/btfaleconosco.jpg" border="0" /></a>';
                    str += '</div>';

                    str += '<div id="dvTermoPolitica" class="RodapeTermoPolitica">';
                    str += '<span class="HomeTextoDestaque" style="font-size: 10px; padding-left: 100px; text-align: center;">Virgula99';
                    str += '- 2013 - Todos os direitos reservados.</span>';
                    str += '</div>';
                    str += '</div>';

                    $('#rodapeGeral').html(str);
                    str = "";

My cshtml

<form id="formPesquisa"  method="post">
            <label>CNPJ:</label>
            <input type="text" id="txtCnpjPesquisa" name="txtCnpjPesquisa" onkeypress=" return SomenteNumero(event);" placeholder="Digite um cnpj válido"/>
            <button id="btnPesquisarCnpj" name="btnPesquisarCnpj" class="btn-pesquisa" >Pesquisar</button>

            <div id="filtroPesquisa">

            </div>

        </form>

        <div id="rodapeGeral">

            </div>
        <input type="hidden" id="txtTipoStatus" value="" />
    </div>

When I load some texts, the footer is in the middle of them and not in the bottom (footer).