repeat left side sectio on each page when convert HTML to PDF

Question

*My goal is I want to build resume with dynamic data but my issue here I want the left side to be repeated on each page.

I searched for how to solve this problem, but I just found how set header and footer. It does not mention repeat section or element or even div.

Please anyone can help?

<!DOCTYPE html>
<html lang="fr-FR">

<head>
    <meta charset="utf-8">
    <title>
    </title>
    <style>
    /** GLOBAL STYLES **/
    * {
        padding: 0;
        margin: 0;
    }

    html, body {
        font-family: "Arial";
        height: 100%;
    }
    
    .text-uppercase {
        text-transform: uppercase;
    }

    .font-weight-400 {
        font-weight:400;
    }

    .border-bottom {
        border-bottom: 5px solid #fd4345;
    }

    /** COLORS **/
    .primary-color {
        color: #fff;
    }

    .gray-color {
        color: #b7bcc1;
    }

    .secondary-color {
        color: #263547;
    }

    /** BACKGROUND COLORS **/
    .white-bg-color {
        background-color: #fdfdfd;
    }

    .primary-bg-color {
        background-color: #fd4345;
    }

    .secondary-bg-color {
        background-color: #263547;
    }

    /** SPACING **/
    .padding-top-100 {
        padding-top: 100px;
    }

    .padding-left-50 {
        padding-left: 50px;
    }

    .padding-bottom-40 {
        padding-bottom: 40px;
    }

    .margin-left-50 {
        margin-left: 50px;
    }

    .margin-top-50 {
        margin-top: 50px;
    }

    .margin-bottom-50 {
        margin-bottom: 50px;
    }

    .margin-top-20 {
        margin-top: 20px;
    }

    .margin-bottom-20 {
        margin-bottom: 20px;
    }

    .margin-bottom-10 {
        margin-bottom: 10px;
    }

    /** WIDTH **/
    .width-30 {
        width: 30%;
    }

    .width-70 {
        width: 70%; 
    }

    /** HEIGHT **/
    .height-100 {
        height: 100%;
    }

    .height-80 {
        height: 80%;
    }

    .height-20 {
        height: 20%;
    }

    .height-20-px {
        height: 20px;
    }

    /** FONT SIZES **/

    .font-size-4 {
        font-size: 4rem;
    }

    .font-size-1-4 {
        font-size: 1.4rem;
    }

    /** FLOAT **/
    .float-left {
        float: left;
    }

    .float-right {
        float: right;
    }

    @media print {
        
    }

    </style>
</head>

<body>
    <div class="height-100">
        {{! INFO PERSONNEL }}
        <div class="height-20 primary-bg-color">
            <div class="padding-top-100 padding-left-50">
                <h1 class="font-size-4 font-weight-400 text-uppercase primary-color">
                    {{personalDetails.firstName}} {{personalDetails.lastName}}
                </h1>
                <h2 class="font-weight-400 text-uppercase secondary-color">
                    {{profileDetails.profile}}
                </h2>
            </div>
        </div>
        {{! INFO PERSONNEL }}

        {{! LEFT SIDE }}
        <div class="float-left width-30 secondary-bg-color height-80">
        </div>
        {{! LEFT SIDE }}

        {{! RIGHT SIDE }}
        <div class="float-right width-70 white-bg-color height-80">

            {{! DOMAINES DE COMPETENCES }}
            {{#profileSkills.length}}
            <div class="border-bottom margin-left-50 margin-top-50 margin-bottom-50 padding-bottom-40">
                <h2 class="secondary-color font-weight-400">DOMAINES DE COMPETENCES</h2>
                {{#profileSkills}}
                <div class="margin-top-20 margin-bottom-20">
                    <p class="secondary-color margin-bottom-10 font-size-1-4" style="font-weight: bold;">{{ skillCategory }}</p>
                    <span>{{ skills }}</span>
                </div>
                {{/profileSkills}}
            </div>
            {{/profileSkills.length}}
            {{! DOMAINES DE COMPETENCES }}

            {{! ETUDES ET FORMATIONS }}
            {{#educations.length}}
            <div class="border-bottom margin-left-50 margin-top-50 margin-bottom-50 padding-bottom-40">
                <h2 class="secondary-color font-weight-400">ETUDES ET FORMATIONS</h2>
                {{#educations}}
                <div class="margin-top-20 margin-bottom-20">
                    <p class="secondary-color margin-bottom-10 font-size-1-4" style="font-weight: bold;">
                        {{institute.name}}
                    </p>
                    <span>{{qualification}}</span>
                    <span>|</span>
                    <span>{{startDate.month}} {{startDate.year}}-</span>
                    <span>{{endDate.month}} {{endDate.year}}</span>
                </div>
                {{/educations}}
            </div>
            {{/educations.length}}
            {{! ETUDES ET FORMATIONS }}

            {{! ETUDES ET FORMATIONS }}
            {{#educations.length}}
            <div class="border-bottom margin-left-50 margin-top-50 margin-bottom-50 padding-bottom-40">
                <h2 class="secondary-color font-weight-400">ETUDES ET FORMATIONS</h2>
                {{#educations}}
                <div class="margin-top-20 margin-bottom-20">
                    <p class="secondary-color margin-bottom-10 font-size-1-4" style="font-weight: bold;">
                        {{institute.name}}
                    </p>
                    <span>{{qualification}}</span>
                    <span>|</span>
                    <span>{{startDate.month}} {{startDate.year}}-</span>
                    <span>{{endDate.month}} {{endDate.year}}</span>
                </div>
                {{/educations}}
            </div>
            {{/educations.length}}
            {{! ETUDES ET FORMATIONS }}

            {{! ETUDES ET FORMATIONS }}
            {{#educations.length}}
            <div class="border-bottom margin-left-50 margin-top-50 margin-bottom-50 padding-bottom-40">
                <h2 class="secondary-color font-weight-400">ETUDES ET FORMATIONS</h2>
                {{#educations}}
                <div class="margin-top-20 margin-bottom-20">
                    <p class="secondary-color margin-bottom-10 font-size-1-4" style="font-weight: bold;">
                        {{institute.name}}
                    </p>
                    <span>{{qualification}}</span>
                    <span>|</span>
                    <span>{{startDate.month}} {{startDate.year}}-</span>
                    <span>{{endDate.month}} {{endDate.year}}</span>
                </div>
                {{/educations}}
            </div>
            {{/educations.length}}
            {{! ETUDES ET FORMATIONS }}

        </div>
        {{! RIGHT SIDE }}

    </div>
</body>
</html>

You can see the result output here:

score 0 · Answer 1 · edited Feb 09 '21 at 10:54

0

For aligning divs and other like you must use the CSS feature called Grid over float property. It's a current standard on frontend building. You'll see that way will be more easy to layout your website.

References:

CSS-TRICKS | A Complete Guide to Grid

edited Feb 09 '21 at 10:54

MaxiGui

6,190
4
16
33

answered Jan 23 '21 at 19:54

Jorge Luiz

281
4
10

I think you don't understand my question, my bad i want to convert html to pdf like you said grid and flexbox don't work when i try to convert to pdf file. Now i want to make left side repeate for each page in pdf file. Also thanks for your response – ELBEQQAL Jan 24 '21 at 12:15
@ELBEQQAL I sugest you add an additonal wireframe in your post for the SO can help you better. Please, edit your post for inform that you wish that your code be printable properly in PDF. – Jorge Luiz Jan 24 '21 at 15:17

repeat left side sectio on each page when convert HTML to PDF

1 Answers1