Content created dynamically over content created dynamically not working

Hello, I have a "static" page (in quotation marks because it is dynamically generated by PHP, but let's say static in the eyes of JavaScript) and I'm trying to dynamically create it because it will become a widget for other sites.

First I make an append in a static div with all the content that will always be the same, after that I make an ajax request to get the information coming from the database and give an append to a div that was generated dynamically before. The problem is that it does not work the same way it should work if it were static. All the HTML I use is the same as the static page. So much so that by picking up the source code of the DOM, the two are exactly the same.

I have already commented on all the code that runs after that in both cases, leaving only HTML generated and CSS working, but still some of the ajax content is not shown. At no time do I use IDs, only classes.

Here are some examples: JavaScript:

$(document).ready(function() 
  {
    var num_prod = 1;
    for (var i = 0; i < num_prod; i++)
    {
      $("#banner_"+(i+1)).append('<div class="div_triangle"><span class="span_price preco"><ul class="preco_ul"></ul></span><div class="div_scroll"><ul class="div_scroll_ul"></ul></div>');
    };
    var dataform = <? echo json_encode($id_produtos)?>;
    $.ajax({
      type: "POST",
      url: "afiliados_banners_service_get.php?produtos_id="+JSON.stringify(dataform),
      data: dataform,
      dataType: "json",
      error: function(data)
      {
        alert("Erro");
      },
      success: function(data)
      {
        var produtos = new Array;
        for (var i = 0; i < data.length; i++)
        {
          produtos[i] = new Array;
          $.each(data[i], function(key, value)
          {
            produtos[i][key] = value;
          });
        };
        for (var i = 0; i < data.length; i++)
        {
          //esse append abaixo não aparece na tela, mas é gerado no DOM
          $(".preco_ul").append('<li class="preco_li"><span class="span_de">De: R$'+produtos[i]['preco']+'<br></span><span class="span_por">Por: R$'+produtos[i]['preco_para']+'</span></li>');
          //Nesse append o visual não fica igual na página estática.
          $(".div_scroll_ul").append('<li class="div_scroll_li"><img class="img_prod div_scroll_img" src="produtos/'+produtos[i]['img1']+'_2.jpg"></li>');
        };
      }
    });
  });

CSS:

@font-face {
        font-family: 'roboto_slabregular';
        src: url('fonts/roboto/RobotoSlab-Regular-webfont.eot');
        src: url('fonts/roboto/RobotoSlab-Regular-webfont.eot?#iefix') format('embedded-opentype'),
                 url('fonts/roboto/RobotoSlab-Regular-webfont.woff') format('woff'),
                 url('fonts/roboto/RobotoSlab-Regular-webfont.ttf') format('truetype'),
                 url('fonts/roboto/RobotoSlab-Regular-webfont.svg#roboto_slabregular') format('svg');
        font-weight: normal;
        font-style: normal;
}
body,html{ margin:0}

#banner_1 {width:120px;height:400px; background:#FFFFFF; cursor:pointer; position:absolute}


.div_scroll { width:160px; height:160px; margin:20px 0 0 20px; padding:0; overflow:hidden}
.div_scroll_ul { display:inline-block;list-style:none; margin:0; padding:0; width:1850px;}
.div_scroll_li { display:inline-block;list-style:none; margin-right:20px}
.div_scroll_img{ height:160px;}
.preco_ul { display:inline-block;list-style:none; margin:0; padding:0; width:1450;}
.preco_li { display:inline-block;list-style:none; margin-right: 20px}


.img_logo{ position:absolute; margin:2px; z-index:101}
.p_phrase{ position:absolute; z-index:101;font-family: 'Droid Sans', verdana, sans-serif; font-size:16px; font-weight:700; color:#209b7a; margin-left:10px; display:none}
.phrase_impact{ color:#0b614a}
.div_triangle{ position:absolute; width:65px; height:42px; background:#ff6600; z-index:102; right:3px;}
.div_triangle_bottom{ margin-top:42px; width: 0;height: 0;border-style: solid;border-width: 15px 32.5px 0 32.5px;border-color: #ff6600 transparent transparent transparent;}
.span_price{ position:absolute; margin-top:2px; width:100%; font-family:roboto_slabregular; font-size:12px; text-align:center; color:#fff}
.span_de{ color:rgba(255,255,255,.8);text-decoration:line-through; font-size:11px}
.div_slogan{ position:absolute; width:100%; padding:6px 0 6px 0; background:rgba(255,255,255,.7); margin-top:105px; font-family: 'Droid Sans', verdana, sans-serif; font-size:16px; font-weight:700; color:#0b614a; text-align:center; z-index:103}
.div_slogan span{font-size:12px; color:#209b7a}
.div_bottom{ position:absolute; bottom:5px; width:100%; text-align:center; font-family: 'Droid Sans', verdana, sans-serif; font-size:12px; color:#bb1e39; z-index:104}
.div_bottom:hover{ color:#840002; text-decoration:underline}
.div_bottom span{ color:#911228}
.div_bottom span:hover{ color:#840002}

I just took some parts of the first append, which was a little big, but I decided to leave all CSS for if the problem is in it.

Rendering images follow:

Static:

Dynamic:

Obviously I deleted the company logo and website. This is because I have commented all the JavaScript that comes after the Ajax that finishes arranging the content, thus not having to see the problem of the second append of Ajax, but the JavaSscript that comes after is going to leave the scope of the question. Note that not static prices (first append of Ajax) appear, but in dynamic not.

The only way to make them look exactly the same is by commenting on the entire css. Then I can see the first append of Ajax.

This leads me to believe that the problem is somehow related to CSS, since the DOM of the 2 is identical.

And before they come and tell me to add css after building the elements, I've already tried this.

Can anyone tell me if adding new content through ajax to dynamically created content is a problem?

Edit:

I found the problem. Note that the preco_ul class has an item (width: 1450px) at the end of it. For some reason in the dynamic version the size of the container with this class did not obey the size of the parent container. So I redo my question: