This is an archived forum post. The information may be outdated. Contact us if you have any questions.

Header width vs content width

wpcs_philip wrote on 2014-02-13:
Hello,

We're trying to do a bit of a complicated design, including a header. The width of the header and main content areas need to be the same width and positioned exactly the same so we can fake a border all the way around both. (header will have top/left/right, content will have left/right). I'm getting a slight offset though between the header and the content, even with completely stripped down css, example PDF attached.

The file we use to generate it is quite complicated (system built into WordPress to generate the PDF's), but the settings/html/css are like...

Settings...
$client->setPageWidth("8.5in");
$client->setPageHeight("11in");
$client->setHorizontalMargin('0.25in');
$client->setVerticalMargin('100pt');
$client->setInitialPdfExactZoom('100');

Header...
		$header = '
		<!doctype html>
		<html>
		<head>
		<meta charset="UTF-8">
		<title>'.$page_details->post_name.'</title>
		<link rel="stylesheet" type="text/css" media="all" href="'.$uri.'/style.css" />
		</head>
		
		<body>
		<div class="pdf_header">
		</div>
		</body>
		</html>';		
		
		$client->setHeaderHtml($header);



Content HTML...
		$output = 
		'<!doctype html>
		<html>
		<head>
		<meta charset="UTF-8">
		<title>'.$page_details->post_name.'</title>
		<link rel="stylesheet" type="text/css" media="all" href="'.$uri.'/style.css" />		
		<script type="text/javascript" src="//use.typekit.net/nsr3bkh.js"></script>
		<script type="text/javascript">try{Typekit.load();}catch(e){}</script>		
		</head>
		
		<body>
		<div class="custom_pdf">
		content
		</div>
		</body>
		</html>';		


CSS...
.custom_pdf { width:500px !important; background:red; height:250px; }
.pdf_header { width:500px !important; background:blue; height:250px; }


Any ideas how I can get this to line up exactly?

Thanks much!

Philip
support wrote on 2014-02-14:
Hello Philip,

What about something like this (see the attached result):
$client->setPageWidth("8.5in"); 
$client->setPageHeight("11in"); 
$client->setPageMargins(".5in", ".25in", ".5in", ".25in");
  
$content = "<body style='margin:0;padding:0;background-color:#eee'>
<div style='height:100%;border-left: 1px solid #777;border-right: 1px solid #777;'>
Content
</div>
</body>";

$header = "<div style='background-color:#ddd;margin-top:10px;height:100%;border-top:1px solid #777;border-left:1px solid #777;border-right:1px solid #777;'>
Header
</div>";
wpcs_philip wrote on 2014-02-14:
That looks like it will work perfectly.

Thanks super much :)