I am completely out of ideas.
I have a page with a header that extends the full width of the page. I have a column on the right that extends the height of the page. The right column also has text in it that should only show up on the first page. The right column also has a bit of text that appears at the bottom of the column. I have a footer that needs about 2 inches of space. If I actually try and set the bottom margin to two inches then the text in my right column gets cut off.
I currently have the header and right column working the way I need them to. I am treating the footer information as a footnote. I need the footnote to stay on the first page even if the content extends beyond on the first page.
Please let me know if you need more information to understand what I am attempting to do.
I have a page with a header that extends the full width of the page. I have a column on the right that extends the height of the page. The right column also has text in it that should only show up on the first page. The right column also has a bit of text that appears at the bottom of the column. I have a footer that needs about 2 inches of space. If I actually try and set the bottom margin to two inches then the text in my right column gets cut off.
I currently have the header and right column working the way I need them to. I am treating the footer information as a footnote. I need the footnote to stay on the first page even if the content extends beyond on the first page.
@page {
size: 8.5in 11in;
margin: 1in 0in 1.35in 0in;
@top {
vertical-align: top;
content: flow(headerNormal);
}
@page:first
{
margin: 1.019in 0 .25in 0;
}
div.pageNormal {
page-break-before: always;
}
.leftCol
{
float: left;
padding: .25in .25in .25in .5in;
width: 5.75in;
}
.rightCol
{
background-color: #2e2b7c;
float: right;
padding: 0 .10in 0 .15in;
width: 1.75in;
height: 10in;
}
.footerFirstPage
{
width: 5.75in;
margin: 0 0 0 .5in;
display: prince-footnote;
}
.footerFirstPage::footnote-call
{
font-size: 0;
}
.footerFirstPage::footnote-marker
{
font-size: 0;
}
<div class="pageNormal">
<div class="leftCol">
<div class="footerFirstPage"></div>
</div>
<div class="rightCol"></div>
</div>
Please let me know if you need more information to understand what I am attempting to do.