'@media print , div and header overlap

I just want add header for every pages. So i use @media print. This is my code

@media screen {
    div#parent {
        display:none;
    }
}
@media print {
    div#parent {
        position:fixed;
        display:block;
        top:0;
    }
}

The problem is header have overlaped with every page

htmlcssmedia


Solution 1:[1]

You need to add a space between the content and your header. I don't know your html structure, but if you have something like this:

HTML

<html>

<body>
    <div class="head">
        <!-- Your header here -->
    </div>

    <div class="content">
        <!-- Your page content here -->
    </div>
    
</body>

</html>

You need to add some margin-top or padding-top to the class .content, and it should work fine:

CSS

.content {
    margin-top: 100px;
}

Solution 2:[2]

You need to use include method that php gives us.

Imagine you have following structure:

app|
   | header.html
   | index.php

In your header, you will have the header you are using right now, and in the index.php, you will have to call that file. You can use <?php include "header.html"; ?>

Your index.php, should look like this:

<body>

    <?php include "header.html"; ?>

    <div class="content">
        <!-- Page Content Here -->
    </div>

</body>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Maidagan
Solution 2 Maidagan

Related Questions