防止javascript / jquery添加的div在父div之外流动

Question

现在我已经开始了几天，我确信我错过了一些简单的事情，但我不能为我的生活弄清楚它是什么。

我尝试了一些我在SO上找到的选项，例如overflow:auto;或overflow:scroll;将其更改为表格单元格列等等。

附件是它的外观和我不希望它看起来的图像，左边的较长列是可变的，取决于他们从上一页中选择的用户，所以我无法设置空白部分的预定宽度，我也不能使用计数器来限制用户添加Custom Price时添加的列数。

 <div class="resultswrapper">
 <div class="termwrapper">
   <div style="margin-top:-25px; margin-left:-16px; padding:5px; position:absolute; display: table-cell; vertical-align: bottom;">
     <img src="images/GreenMountain.png" style="max-width:96px; max-height:45px; vertical-align:bottom; margin:auto auto; bottom:0; display: block; position: absolute;" />
   </div>
   <div class="termprice">$0.06255</div>
   <div class="termcost">$3,874.72</div>
   <div class="termsaving">$724.77</div>
   <div class="termprice">$0.06447</div>
   <div class="termcost">$3,993.66</div>
   <div class="termsaving">$605.83</div>
   <div class="termprice">$0.06200</div>
   <div class="termcost">$3,840.65</div>
   <div class="termsaving">$758.84</div>
   <div class="termprice">$0.06181</div>
   <div class="termcost">$3,828.88</div>
   <div class="termsaving">$770.61</div>
   <div class="termprice">x</div>
   <div class="termcost">x</div>
   <div class="termsaving">x</div>
   <div class="termprice">x</div>
   <div class="termcost">x</div>
   <div class="termsaving">x</div><div class="termsaving">$4.95</div>
 </div>
 </div>

这可能不是最好的方式，但我需要它才能运作。

CSS：

.termwrapper {
  -webkit-border-radius: 20px 20px 20px 20px;
  border-radius: 20px 20px 20px 20px;
  border:1px inset black;
  float:left;
  margin-left:10px;
  background:rgba(50,111,29,0.95);
  background-image:url(images/pricingbg.png);
  background-size: cover;
  background-position:bottom;
  margin-top:-10px;
  padding:10px;
}
.termprice {
  font-size:15px;
  line-height:40px;
  text-align:center;
  margin-top:5px;
}
.termcost {
  font-size:13px;
  line-height:20px;
  text-align:center;
}
.termsaving {
  font-size:13px;
  line-height:20px;
  text-align:center;
  margin-bottom:10px;
}
.resultswrapper {
  margin-left:110px;
  position:absolute;
  width:auto;
}

最后但并非最不重要的是，jquery / javascript代码。

$("#AddCustomPrice").click(function(e) {
    e.preventDefault()
        $( "#dialog-message" ).dialog({
      modal: false,
      buttons: {
        "Add Price": function() {
                    var Term        = $("#CustomTerm").val()
                    var Price       = $("#CustomPrice").val()
                    var CurrRate    = $("#CurrentRateHidden").attr('data-id')
                    var Volume      = $("#VolumeHidden").attr('data-id')
                    var CurrentCost = '<?=$currentcost?>'
                    // $currentcost - $pricingarr['term36'] * $volume2
                    var Saving      = CurrentCost - Price * Volume
                    var AnnualCost  = Price * Volume
                    console.log(Price)
                    console.log(Price * Volume)
                    $(".resultswrapper").append(
          '<div class="termwrapper2">'
          +'  <div style="margin-top:-25px; margin-left:-16px; padding:5px; position:absolute; display: table-cell; vertical-align: bottom;">'
          +'    <img src="http://cdn2.bigcommerce.com/server400/26074/products/235/images/383/custom_quote_10041.1367332284.1280.1280_29641.1369264683.1280.1280__59812.1369264887.1280.1280.jpg" style="max-width:96px; max-height:45px; vertical-align:bottom; margin:auto auto; bottom:0; display: block; position: absolute;" />'
          +'  </div>'
          +'<div style="float:left; display: block; clear: both;">'
          +'  <div class="termprice"><div style="margin-top:0px; line-height:0;"><strong>'+Term+' Months</strong></div>'+Price+'</div>'
          +'  <div class="termcost">'+AnnualCost.toFixed(2)+'</div>'
          +'  <div class="termsaving">'+Saving.toFixed(2)+'</div>'
          +'  <div class="nodal"></div>'
          +'  <div class="swing"></div>'
          +'  <div class="termsaving"> </div>'
          +'</div>'
          +'</div>'
          )
          $( this ).dialog( "close" );
        }
      }
    });
  });

等待快速反应;）