css print media layout with a header and a two column lay out that flows from top to bottom

Question

is it possible to put a header on all pages to be printed

is it possible to have the main body with two columns that flow form the first column and then to the second column and then to the next page and with a border in the middle of the columns

the layout is demonstrated https://www.scribd.com/document/391754619/Example

so far what i have this but i haven't gone far

<style>
    body {
        font-family: cursive;
        font-size: 16px;
        margin: 0;
        padding: 10px;
    }

    p,
    h4 {
        padding: 0;
        margin: 2px 0 2px 0;
    }

    .headings {
        text-align: center;
        position: fixed;
        top: 10px;
        left: 10px;
        right: 0;
    }

    .headings>h4 {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .headingsTable {
        width: 100%;
        text-align: left;
    }

    .patiItem {
        margin-top: 90px;
    }

    .patiItem {
        display: inline-grid;
        width: calc(50% - 5px);
        vertical-align: top;
    }

    @page {
        size: A4;
    }

    @media print {
        .headings {
            position: fixed;
            top: 10px;
        }
        h4,
        p {
            page-break-inside: avoid;
        }
    }
</style>


<body>
<div class="headings">
    <h4>Progress notes</h4>
    <table class="headingsTable">
        <tbody>
            <tr>
                <td><b>Name</b> - Chiyembekezo Lakudzala</td>
                <td><b>Nuero number</b> - 123</td>
                <td><b>Hospital</b> number 12345</td>
            </tr>
        </tbody>
    </table>
</div>
<div class="notes">
    <div class="patiItem">
        <div class="patiItemFixed">
            <p>Seen by Lorem ipsum</p>
            <p>Day 034 Lorem ipsum</p>
            <p>Night duty report</p>
            <p>Date: 23/October/2018</p>
            <p>08:16 am</p>
        </div>
        <div class="side">
            <h4>Issues:</h4>
            <pre>Sed pharetra lorem vel sem varius, id iaculis urna fermentum. Maecenas luctus ut tellus fringilla facilisis. Suspendisse augue ipsum, faucibus at orci rutrum, volutpat malesuada ipsum.</pre>
            <h4>Examination:</h4>
            <pre>Donec mattis nulla id sapien accumsan pulvinar. Duis quis mauris elementum mauris porttitor hendrerit vel in augue. Nam a felis non justo luctus fermentum scelerisque vel eros</pre>
            <h4>Impression:</h4>
            <pre>Quisque sodales interdum nulla eget auctor. Mauris pretium fermentum ex ut ultrices. Vivamus placerat laoreet odio sit amet vehicula</pre>
            <h4>Plan:</h4>
            <pre>Phasellus sagittis felis quam. Donec hendrerit auctor ipsum nec placerat. Praesent hendrerit tristique est eget porttitor.</pre>
        </div>
    </div>
    <div class="patiItem">
        <div class="patiItemFixed">
            <p>Seen by Lorem ipsum</p>
            <p>Day 034 Lorem ipsum</p>
            <p>Night duty report</p>
            <p>Date: 23/October/2018</p>
            <p>08:16 am</p>
        </div>
        <div class="side">
            <h4>Issues:</h4>
            <pre>Sed pharetra lorem vel sem varius, id iaculis urna fermentum. Maecenas luctus ut tellus fringilla facilisis. Suspendisse augue ipsum, faucibus at orci rutrum, volutpat malesuada ipsum.</pre>
            <h4>Examination:</h4>
            <pre>Donec mattis nulla id sapien accumsan pulvinar. Duis quis mauris elementum mauris porttitor hendrerit vel in augue. Nam a felis non justo luctus fermentum scelerisque vel eros</pre>
            <h4>Impression:</h4>
            <pre>Quisque sodales interdum nulla eget auctor. Mauris pretium fermentum ex ut ultrices. Vivamus placerat laoreet odio sit amet vehicula</pre>
            <h4>Plan:</h4>
            <pre>Phasellus sagittis felis quam. Donec hendrerit auctor ipsum nec placerat. Praesent hendrerit tristique est eget porttitor.</pre>
        </div>
    </div>
    <div class="patiItem">
        <div class="patiItemFixed">
            <p>Seen by Lorem ipsum</p>
            <p>Day 034 Lorem ipsum</p>
            <p>Night duty report</p>
            <p>Date: 23/October/2018</p>
            <p>08:16 am</p>
        </div>
        <div class="side">
            <h4>Issues:</h4>
            <pre>Sed pharetra lorem vel sem varius, id iaculis urna fermentum. Maecenas luctus ut tellus fringilla facilisis. Suspendisse augue ipsum, faucibus at orci rutrum, volutpat malesuada ipsum.</pre>
            <h4>Examination:</h4>
            <pre>Donec mattis nulla id sapien accumsan pulvinar. Duis quis mauris elementum mauris porttitor hendrerit vel in augue. Nam a felis non justo luctus fermentum scelerisque vel eros</pre>
            <h4>Impression:</h4>
            <pre>Quisque sodales interdum nulla eget auctor. Mauris pretium fermentum ex ut ultrices. Vivamus placerat laoreet odio sit amet vehicula</pre>
            <h4>Plan:</h4>
            <pre>Phasellus sagittis felis quam. Donec hendrerit auctor ipsum nec placerat. Praesent hendrerit tristique est eget porttitor.</pre>
        </div>
    </div>
</div>

This question has been asked before I've included a link to the answer that will help you :) . https://stackoverflow.com/a/35662608/10469933 — Daniel Gonzalez, Oct 27 '18 at 21:45
Possible duplicate of [How to use HTML to print header and footer on every printed page of a document?](https://stackoverflow.com/questions/1360869/how-to-use-html-to-print-header-and-footer-on-every-printed-page-of-a-document) — kenlukas, Oct 28 '18 at 01:49
for both of the questions i only see how to put a fixed header or footer but nothing about a two column layout @DanielGonzalez — cultulhul, Oct 30 '18 at 19:06
the third answer seems like a better solution then whats i came up with but nothing about a two column layout @kenlukas — cultulhul, Oct 30 '18 at 19:16

css print media layout with a header and a two column lay out that flows from top to bottom

0 Answers0