Forum Samples, Tips and Tricks

how do I move a div to the bottom of the page its on

ashah
I have a div with a class footer-spec

How do I use prince to move that div to the bottom of the PAGE in regards to the pdf that is generated.

I have tried:

-prince-float: page;
-prince-clear: end;

Chrome does not seem to register those attributes.

Also tried:

flow: static(flow-prince-footer)

Not really sure what to do!

Please help!
pjrm
You could try -prince-float: page end;
ashah
Thanks for reply - for some reason when I add that it just doesn't get registered:

element.style {
-prince-float: page end;
}

The prince-float gets crossed out. I attached a screenshot of what I mean. Is there something I need to add to my style sheet for that to work?
  1. Screen Shot 2021-09-10 at 7.37.46 AM.png9.0 kB
mikeday
The "prince-float" property only works in Prince, not Firefox or Chrome.
ashah
Thanks so I have a div with a class "footer-note-section"

In the prince-page.css I am adding a property:

.footer-note-section {
-prince-float: page-end;
}

I get a linter error: "Also define the standard property 'float' for compatibility"

But when I then run the app and export the pdf of the page using that div - It doesn't go to the bottom of the page. Is there anything else I can do?
mikeday
The value of the property should be "page end" (two keywords) not "page-end".
mikeday
Sorry, that should be "page bottom"! Like this:
<style>
.footer-note-section {
    -prince-float: page bottom
}
</style>
<div class="footer-note-section">
This will be at the bottom of the page.
</div>
ashah
Thanks!