HTML/CSS Positioning of Tables

Question

I am having a quite nice HTML and CSS application/ERP that works really nicely. It is called "ERPNext" and the customization options are really great.

But not back on topic. I managed to get everything in place. My printout also looks really good despite one special thing.

This is my CSS for the page - which works:

background-color: white; 
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.5); 
width: 8.3in; 
height: 11.69in; 
padding: 0.0in; 
margin: auto;

I have created a "header" which spans over the whole width and starts at 0.0 inch horizontally and vertically. But on the other hand I would like to have a "footer" (table). This should be positioned at:

10.9in to 11.69in in height and 0.0in to 8.3in in width (width: 100%).

Is there a chance to place this table exactly there? At the moment the table is positioned wherever the document ends...this could vary...

Best, Dan

Answer 1

Try this CSS for the lower table (the "footer")

background-color: #000000 !important;
height: 0.7in;
position: absolute;
top: 10.9in;
width: 7.55in;
padding: 0;
margin: 0;

Here's a fiddle - https://jsfiddle.net/Lj1xhu2f/2/ . Try to give every "footer" the same style attributes