How to position a div right at the bottom of a table? - html

Question

I would like to position a div at the right edge bottom of a table. I am using bootstrap and I found out using offest I can move the div right at the bottom corner of the table but I did not like this solution as seems not to work correctly. So how can I position a div right at the bottom corner of a table that is inside a modal. the following block is the one that I am trying to position right bottom of the table:
<div class="col-md-2 col-md-offset-10 col-sm-offset-9 col-xs-offset6">
<div>
<div class="form-group">
<label id=""></label>
<label id=""></label>
</div>
<div class="form-group">
<label id=""></label>
<label id=""></label>
</div>
<div class="form-group">
<label id=""></label>
<label id=""></label>
</div>
</div>
</div>
Full code:
<div class="modal fade" id="" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-10">
<div class="panel panel-primary panel-primary-trim">
<div class="panel-heading">
<h3 class="panel-title"></h3>
</div>
<div class="panel-body panel-body-trim">
<div class="table-responsive">
<table id="items-job-payments-modal-table" class="table table-striped">
<thead>
<tr>
<th>Date</th>
<th>Amount</th>
</thead>
<tbody>
<tr>
<td>DateExample</td>
<td>10</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-md-2 col-md-offset-10 col-sm-offset-9 col-xs-offset6">
<div>
<div class="form-group">
<label id=""></label>
<label id=""></label>
</div>
<div class="form-group">
<label id=""></label>
<label id=""></label>
</div>
<div class="form-group">
<label id=""></label>
<label id=""></label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

I would place the table into an inline-block div (wrapper) that has relative positioning, then use absolute positioning (bottom: 0, right: 0) for the element you want at the bottom right. The table and the positioned element are both children of the relative positioned wrapper.
table {
border-collapse: collapse;
}
td {
padding: 3rem;
background: #ccc;
border: none;
border: 1px solid white;
}
.wrapper {
display:flex;
flex-direction: row;
height: auto;
justify-content: flex-start;
align-items: flex-end;
flex-wrap: no-wrap;
}
.bottomRight {
position: relative;
background: #bbb;
padding: 1rem;
padding: 3rem;
width: auto;
height: auto;
display: block;
border: 1px solid white;
border-left: none;
}
<div class='wrapper'>
<table>
<thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tbody>
</table>
<div class="bottomRight">10</div>
</div>