How can i position my containers correctly?

Question

I try to create a thymeleaf template and render a printable pdf. This is what i have right know:

<html xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"
        charset="UTF-8"></meta>
    <title>Certifictate</title>
    <style>
    @page {  
        margin-top: 0px;
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        size: A4 portrait;
    }
    body {
        font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
        font-size: 10pt;
        background-size: 100%;
    }
    div.main{
        border: 1px solid;
    }
    div.centerText{
        text-align: center;
        background:lightcyan;
        margin: 0px;
    }
    div.leftText{
        text-align: left;
    }
    div.rightText{
        text-align: right;
    }
    div.signature{
        background:PapayaWhip;
    }
    </style>
</head>
<body th:style="'background-image:url(' + ${bgurl} + '); margin-top: 7.0cm; margin-left: 2.5cm; margin-right: 2.5cm; margin-bottom: 2.0cm;'">
    <div class="main">
        <div class="centerText">
            <h1>title</h1>
        </div>

        <div class="leftText">
            <p>description of certificate</p>
        </div>

        <div class="signature">
            <p>signature</p>
        </div>

    </div>

    <footer>
        <div class="rightText">
            <p>document information</p>
        </div>
    </footer>
</body>
</html>

The whole page has a background-image though the actual content of the certificate needs to have the margins specified in the body element. I tried to set margins in the main-div, but couldn't figure out how to position it correctly.

Up to the signature-div the page seems fine right know, but i need to position this element to the bottom of body with a bottom margin of 2cm to the end of the page. The footer also has to be positioned right below the signature-div.

I tried every example of this thread, but couldn't figure it out properly.

CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page

Can someone help? I would love an explanation how i could do this right, but a short solution is also fine.

score 0 · Answer 1 · answered Mar 22 '21 at 02:30

I think you can use 'position: absolute' or 'position: fixed'.

@page {
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    size: A4 portrait;
}

body {
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 10pt;
    background-size: 100%;
}

div.main {
    position: absolute;
    top: 7.0cm;
    left: 2.5cm;
    right: 2.5cm;
    bottom: 2.0cm;
    border: 1px solid;
    padding-bottom: 2.0cm;
    box-sizing: border-box;
}

div.centerText {
    text-align: center;
    background: lightcyan;
    margin: 0px;
}

div.leftText {
    text-align: left;
}

div.rightText {
    text-align: right;
}

div.signature {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: PapayaWhip;
}

footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

<body th:style="'background-image:url(' + ${bgurl} + ');'">
    <div class="main">
        <div class="centerText">
            <h1>title</h1>
        </div>

        <div class="leftText">
            <p>description of certificate</p>
        </div>

        <div class="signature">
            <p>signature</p>
        </div>
    </div>

    <footer>
        <div class="rightText">
            <p>document information</p>
        </div>
    </footer>
</body>

How can i position my containers correctly?

1 Answers1