Log in / Register

Forum › How do I...?

Page Header spacing

JonoB
I'm trying to work out how the margins work on page headers.

I have a simple html document and css file as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<link href="styles.css" rel="stylesheet" type="text/css" />	    
</head>
<body>
<div class="header">
	<div class="branding">
		<div class="brand-name">
			My Company Name    	       
		</div>
	</div>
	<div class="address">
		This is the<br />
		header address            
	</div>
</div>
   
<div class="body">
	<div class="title">
		This is the body of the document        
	</div>

 </div>
</body>
</html>


@media print {
	@page { size: A4; }
	@page { 
		margin: 50pt 50pt 50pt 50pt; 
		border: 2px solid blue;
	}

	@page {
	    @top {
			content: flow(header);
			margin-top: 150pt;
			border: 2px solid red;
		}
	}

	.header {
		flow: static(header);
	}
}

.brand-name {
	font-size: 30px;
	font-weight: bold;
	color: #de5622;
}

.address {
	width: 250px;
}

.body {
	margin-top: 100pt;
	border-top: 2px solid green;
}

.title {
	font-size: 24px;
	font-weight: bold;
	margin-top: 10px;
}


I've added in some coloured borders to try understand how the margins work.

For some reason, when I print this to PDF, only the .brand-name element is printed in the header, and the .address element is omitted.

What am I doing wrong here?
mikeday
The "margin-top: 150pt;" on the @top page margin box is causing the content to get clipped, as it is too big for the top page margin.