Adjusting the placement of a div based on the height of a table

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>&nbsp;Invoice Total(USD)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{invoiceamount}}</h5>
<h5>&nbsp;Paid to date&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{paidamount}}</h5>
<div class="horizontalRule2" runat="server"></div>
<h5>&nbsp;Invoice Total(USD)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{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:

Answer №1

I believe it would be best to maintain a table format for those 2 cells, as they are integral to the data being tabulated.

This can easily be achieved by adding them within the existing structure:


<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 %}

<td colspan="3" style="text-align:right;"><h5>Invoice Total(USD)</h5></td>
<td style="text-align:right;"><h5>{{invoiceamount}}</h5></td>

<td colspan="3" style="text-align:right;"><h5>Paid to date(USD)</h5></td>
<td style="text-align:right;"><h5>{{balanceamount}}</h5></td>

</tbody>
</table>
</div>

Answer №2

If you're experiencing layout issues, consider clearing the div#table or the totals div located below:

div#table {
    clear:both;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The method .slideUp() is not functioning as intended

My current project involves a page structure that looks like this: <div id="wrapper"> <div id="page_banner"> <canvas id="voucher_canvas"></canvas> <div id="div_voucher_img"><img id="voucher_img" src="" ...

JavaScript file isn't being called by index.html

I am working on establishing a basic client/server connection using node.js modules along with a straightforward HTML page. The content of the HTML page is as follows: <script type="text/javascript" src="index.js"></script> The index.js fi ...

Node.js web application encounters ECONNRESET and MongoNetworkError issues

Currently working on a website with Node.js, Express, and MongoDB (MLAB). The code is too long to post here. When I try to access my index page, app.get("/alumniport", (req, res) => { alumni.find((err, theAlumni) => { if (err) { res.redi ...

Angular: monitoring changes in HTML content within a Component or Directive

I have a situation where I am retrieving HTML content from a REST endpoint using a directive and inserting it into a div element using [innerHTML]. Once this HTML content is rendered, I would like to manipulate it by calling a global function. My approach ...

What is preventing me from displaying my paragraph?

I have some content that I want to show a paragraph with the class paragraphtoggle when clicked, but it's not working as expected. Here is what I have tried: https://example.com/jsfiddle HTML <div class="enzimskiprogramindex herbaprogramindex he ...

It seems like Chrome does not recognize 0 as a numerical value

Take a look at this snippet of HTML code: <!DOCTYPE html> <html> <head> <title>Test</title> </head> <body> <form name='test'> <input type='number&apo ...

The process of deleting lines from an image using Javascript

If I have an image of a data-table and I want to eliminate all the grid lines (defined as continuous vertical or horizontal pixels), is there a way to achieve this using Javascript's image data manipulation? I envision looping through a 2D array conta ...

Expand a div without causing any displacement to surrounding elements

If you have 4 colored divs (red, yellow, green, blue), with 2 per row, and need to expand the second (yellow) without creating a gap under the red, check out this solution. The blue will be positioned underneath the expanded yellow. For a live example, vi ...

Saving Arrays through an Input Form in JavaScript

I am working with an HTML form that looks like the following: <div class="form-group"> <label for="first_name">1st Name</label> <input type="text" id="first_name" placeholder="First Name" class="form-control"/> </div> ...

Exploring the application of URL parameters in HTML code

How can I use URL parameters retrieved with Javascript in my HTML? <script> var url_string = window.location.href; //window.location.href var url = new URL(url_string); var c = url.searchParams.get("name"); console.log(c); </script> I am tryi ...

Guide to sequentially playing multiple video objects with buffering

As I work on developing a reference player application that utilizes node.js, javascript, and HTML5, I have encountered an issue. Currently, my player successfully loads a single video and generates diagnostic data from it. However, I am striving to enhanc ...

ng-repeat and $scope problem

I am having an issue with my page where I display 3 images in a row using Ng-repeat. When I click on any image, it only shows the first image that was displayed in that particular row. Template: <div id="galscrolldiv" class="row" ng-repeat="image in i ...

After a PHP script is executed, a Bootstrap modal will automatically appear on the same page

Seeking assistance with integrating a bootstrap modal into a contact form submission. Despite multiple attempts, I have been unsuccessful in achieving this integration and now find myself at an impasse. My objective is simple: Upon clicking the submit bu ...

Shift div position when clicked and employ jQuery animations

I have been attempting to add animation to a DIV element by using jQuery. The goal is to move the DIV from the center to the left when it is clicked, but I am encountering some issues. The parent div has a position of "relative", and my initial idea was to ...

What is the correct way to display or hide a button based on my specific situation?

Creating a 'show more' button for my app has presented me with a challenge. I am using a directive to handle actions when the user clicks on the read more button: (function(window, angular) { var app = angular.module('myApp'); ...

The Benefits of Semantic Class Names compared to Microdata

As I strive to use semantic class names, my exploration of microdata and SEO raises a question: Is it necessary to use both? Compare these two HTML snippets representing an event: Using CSS classes: <div class="event" itemscope itemtype="http://schema ...

Forget the function once it has been clicked

I'm looking for a solution to my resizing function issue. When I press a button, the function opens two columns outside of the window, but I want to reset this function when I click on another div. Is there a way to remove or clear the function from m ...

Turn off the ripple effect for this element

I am looking to turn off the ripple effect on an ion-chip component, which activates when clicked: <ion-chip> <ion-label>Hey</ion-label> </ion-chip> Is there a way to accomplish this? ...

What is the maximum width that can be set for an HTML input control

I'm working on a web page with a row that contains three controls. SomeText Input Button It looks something like this <div> SomeText <Input/> <img> </div> The image is currently floating to the right. ...

Modifying a header's properties by incorporating chosen values from a form

I am tasked with creating an HTML form that includes 3 select attributes (color, shadow, background-color). Depending on the user's selections, these attributes will be applied to a h1 element on the page. I need to achieve this without using JavaScri ...