Forum How do I...?

footer help

cb3431
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.

@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.
leif
Hi, I may not understand what you want to do. But I suppose that in order to do what you said, namely to 
actually try and set the bottom margin to two inches then the text in my right column gets cut off
then we need to add this rule to the ones you presented above:
@page:first { margin-bottom:2in;} 
And – right – if you set that rule, then the text margin of the right column is also set to 2 inches, causing text to flow over to the next page. However, provided I have analyzed your problem correctly here, then you may workaround the issue by setting the bottom margin of the .rightCol to a negative 2 inch:
.rightCol { margin-bottom:-2in;}
Another thing that works is to set the negative margin on the exact last paragraph inside the right column:
.rightCol p.theExactParagraph{ margin-bottom:-2in;}
Let me know if this was at all any near what you wanted.

leif

cb3431
Thank you. The -2in margin on the right column did the trick.