Dynamically created content over dynamically created content not working

Question

Hello, I have a "static" page (between quotes pq it is dynamically generated by PHP, but let’s say static in the eyes of Javascript) and I’m trying to create it dynamically, 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 take the information coming from the database and give an append in a div that was generated dynamically before. The problem is that it doesn’t work the way it should if it was static. All the HTML I use is the same as the static page. So much so that by taking the DOM source code, the two are exactly the same.

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

Following are 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 only took some parts of the first append, which was a little big, but I decided to leave all the CSS to if the problem is in it.

Follow images of rendering:

Static:

Dynamic:

Obviously, I deleted the company logo and the website. It is this way because I commented all the Javascript that comes after Ajax that finishes to fix the content, so not having to see the problem of the second append of Ajax, but the Javasscript that comes after will leave the scope of the question.
Note that in static prices (first append of Ajax) appear, but in dynamic no.

The only way to make them exactly the same is to comment on all the css. Then I can see the first append of Ajax.

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

And before you come to tell me to add css after creating the elements, I’ve tried this.

Would someone like to tell me if adding new content by ajax to dynamically created content also brings some 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/parent container. So I rephrase my question:

Someone knows the reason why in the static version the container with larger size than the father, obeys the size of this, but when dynamically added a container with larger size to the father it does not obey the size of this?