I have a fairly large header that I'm managing via:

	@page {
		size: US-Letter portrait;
		margin-top: 6in;
		margin-left: 0;
		margin-right: 0;
		margin-bottom: .25in;
		@top-center {
			height: 6in; 
			margin: 0;
			content: flow(header);
		}
	} 

	.prince #backorderHeader {
		flow: static(header);
	}

This is the result:



If I don't add the large margin, the header gets cut off. If I add the large margin, it shows the whole header, but adds a huge gap at the top (shown above).

What can I do to fix this?

1. prince-example.jpg‎ 70.6 kB

How tall is the header? Is it actually six inches tall? Does the header element have any margin or padding itself?

Working with Mike directly, he identified that the issue I was experiencing revolved around my CSS grid framework (http://unsemantic.com/). It uses floats to manage the grid, and Prince was not seeing any height because of those floats. This also caused the overlap shown in the example.

The solution was to add the following to my CSS:

.prince #backorderHeader {
  overflow: hidden;
  flow: static(header);
}