I recently created a dynamic table where rows are inserted dynamically. One issue I am facing is that when the table height increases due to more rows, a div below the table does not show up in the desired position. How can I set the position of the div so that it automatically appears below the table when the table height increases?
<div id="table">
<table class="table table-bordered">
<thead>
<tr>
<th>Description</th>
<th>Quantity</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
{% for invoice in invoices %}
<tr>
<td style="color:black;">{{ invoice.description }}</td>
<td style="text-align:right; color:black;">{{ invoice.quantity }}</td>
<td style="text-align:right; color:black;">{{ invoice.unitPrice }}</td>
<td style="text-align:right; color:black;">{{ invoice.linetotal }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div style="width:243px; height:67px; float:right; margin:0px 215px 0; border:1px solid black;">
<h5> Invoice Total(USD) {{invoiceamount}}</h5>
<h5> Paid to date {{paidamount}}</h5>
<div class="horizontalRule2" runat="server"></div>
<h5> Invoice Total(USD) {{balanceamount}}</h5>
</div>
Here is the CSS code for the table:
#table{
float: right;
height: 110px;
margin: 4px 215px 0;
width: 686px;
}
This is how I want the div to show below the table: