Absolute positioning ignoring padding

Question

I am trying to position a div with buttons at the bottom of a parent div that has a padding.

The expected result is having the button resting on top of the

Answer 1

I use a little javascript to acquire the result:

https://jsfiddle.net/ducfilan/p961moLd/

$(".table_wide").each(function(){
    var paddingInPx = 10;
    var windowWidthInPx = $(window).width();
 
    // Calculate the width of table.
    var thisWidthInPercent = 100 - (100/windowWidthInPx*2*paddingInPx);
 
    // Create an empty div to fill up the space the absolute table occupied in the past.
    $(this).after('
');
    $(this).wrap('
');
});

body {
    background-color: #FDE3A7;
}

#wrapper {
  width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.table_wide {
    display: block;
    overflow: auto;
}

table, th, td {
    border: solid 1px #000;
}

th {
  background: #1E8BC3;
  color: #fff;
  font-weight: 700;
}

  

    
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.
  
  
  

    

      

        
#
        
Table heading
        
Table heading
        
Table heading
        
Table heading
        
Table heading
        
Table heading
        
Table heading
        
Table heading
        
Table heading
        
Table heading
        
Table heading
        
Table heading
        
Table heading
        
Table heading
        
Table heading
        
Table heading
        
Table heading
        
Table heading
        
Table heading
        
Table heading
        
Table heading
        
Table heading
        
Table heading
        
Table heading
      
    
    

      

        
1
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
      
      

        
2
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
      
      

        
3
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
        
Table cell
      
    
  
  
    

    
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh.