I need to add margin to the top of every page except for the first page so that the text does not overlap the logo. Here is an example of the problem (scroll to the second page).
http://fsk.herrmanneasyedit.com/what-we-do/administrativeregulatory/pdf
I have looked at other examples on Stack Overflow, but nothing seems to apply directly.
Any help is greatly appreciated.
@page {
margin: 0.5in 0.5in 0.5in 0.5in;
}
html, body {
font-family: "Poppins", arial, helvetica, sans-serif;
font-size: 10px;
line-height: .8em;
}
.border {
border: 1px solid #d5d5d6;
position: fixed;
top: -0.18in;
left: -0.18in;
bottom: -0.18in;
right: -0.18in;
}
.border-url {
position: absolute;
bottom: 0.50in;
right: 0;
text-align: center;
color: #7D303B;
font-size: 11px;
font-weight: bold;
}
.logo {
padding-left:27px;
padding-top:20px;
width: 245px;
height: 37px;
}
.wrapper {
margin: 0.2in 0.2in 0.2in 0.2in;
page-break-after: always;
}
.wrapper:last-child {
page-break-after: avoid;
}
.text {
margin:0 20px;
}
.text p{
margin: 0.2em 0;
}
.row{
padding-top:62px;
position:relative;
}
.main-content{
}
HTML
<body>
<div class="border">
<img class="logo" src="" width="245" height="37" alt=""/>
<div class="border-url">
www.foulston.com
</div>
</div>
<div class="wrapper">
<div class="row">
<div class="full-photo">
<img src="" width="550" height="100" alt=""/>
<div class="page-title">
<div class="inner">
<h1>Title</h1>
</div><!--end inner -->
</div><!--end page-title -->
</div><!--end full-photo -->
</div><!--end row -->
<div class="main-content">
Main content goes here.
</div>
</div>
</body>
