element overlapping content and footer

Friends, good night. I'm facing a serious problem, I do not know what I'm doing anymore.

The problem is as follows: (I am using the AdminLTE template), when I load contents in a particular div with jquery (append) coming from the database, the main content ignores it, hence this horrible thing:

Butthereisonethough,itonlyhappensthiswhenIdoAPPEND.ifIputanythingelsefixed,aninputforexample,thisdoesnothappen.Doesanyoneknowwhy?

callajaxtophp:

$.ajax({url:'php/lista_enderecos_cadastro.php',type:'POST',success:function(data){$("#enderecos").append(data);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
                alert(thrownError);
            }
    });

PHP file:

<?php
    require_once('banco.php');
    $db = new db();
    $db_acess = $db->conecta_banco();

    session_start();
    $cod_usuario = $_SESSION['id'];

    $sql = "SELECT cep cep, 
                   endereco end, 
                   bairro bairro, 
                   numero num, 
                   complemento compl, 
                   cidade cid, 
                   estado uf 
              FROM usuarios_endereco 
             WHERE cod_usuario = '$cod_usuario'";
    $exec = mysqli_query($db_acess, $sql);
    if($exec){
        while($enderecos = mysqli_fetch_assoc($exec)){
            if($enderecos['compl'] == null){
                $compl = 'Não informado.';
            } else {
                $compl = $enderecos['compl'];
            }

            echo('<div class="col-md-6">
                    <div class="dropdown">
                        <button class="btn btn-default btn-sm dropdown-toggle btn-pull-right" type="button" data-toggle="dropdown"> Meu endereço
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a href="#" id="editar" data-toggle="modal" data-target="#modal-enderecos"><i class="fa fa-pencil-square-o" aria-hidden="true"></i>Editar</a></li>
                            <li><a href="#"><i class="fa fa-times" aria-hidden="true" style="color: red;"></i>Excluir</a></li>
                        </ul>
                    </div>
                    <br>
                    <p>Cep: <span style="color:grey;"> '. $enderecos['cep'] . ' </span> <i class="fa fa-map-marker" aria-hidden="true"></i></p> 
                    <p> Endereço: <span style="color:grey;">'. $enderecos['bairro'] .' - ' . $enderecos['num'] . '</span></p>
                    <p> Complemento: <span style="color:grey;">'. $compl . '</span></p>
                    <p> Cidade: <span style="color:grey;">'. $enderecos['cid'] .' - ' . $enderecos['uf'] . '</span></p>
                    <hr>

                 </div>');
        }
    } else {
        echo('erro');
    }
?>

content where it is loaded:

<div class="row">
                <div class="box box-info">
                  <div class="box-header with-border">
                    <h3 class="box-title">Adicionar Endereço(s)</h3>
                  </div>
                  <div class="box-body" id="enderecos">
                  </div>
                  <div class="box-footer">
                    <button type="button" class="btn btn-info pull-right" data-toggle="modal" data-target="#modal-enderecos" id="AdicionaEndereco">Adicionar</button>
                  </div>
                </div>
              </div>

NOTE: There is a col-md-8, to align.

If anyone knows, please help me! Thank you in advance.