I don't know if it's possible to do what you want using @top-left
, @top-center
and @top-right
. When i try your sample code, I get something like this :
THE COMPANY NAME
____________________________________________________________________
_____ ____
title date
One solution to get what you want would be to use a single @top-center
header, containing the three parts of the header.
The @top-center component will span on the full width of the page, and you can layout your three divs inside it.
For example :
@page {
size: letter;
margin-top: 0.8in;
margin-bottom: 0.5in;
@top-center {content: element(centerHeader);}
}
#page-thisheader-center {
position: running(centerHeader);
}
#company {
border-bottom: #90aac5 1px solid;
text-align:center;
}
#line2 {
border-bottom: #90aac5 1px solid;
}
#article{
float:left;
}
#date {
border-left: #90aac5 solid 1px;
margin-left: 6in;
}
And :
<div id="page-thisheader-center">
<div id="company">THE COMPANY NAME</div>
<div id="line2">
<div id="article">Name of the article</div>
<div id="date">Date : 04/07/2013</div>
</div>
</div>