CSS and Flying Saucer header - css

Question

The company I work for has been using Flying Saucer for a while. Rencently, they have changed the header format to a complex one that looks like this:
THE COMPANY NAME
_____________________________________________________________________________
This is the name of the article | Date:04/17/2013
_____________________________________________________________________________
Regrettfully, I can't get it to look like above. THe closes I can get it to look like is where the top line is shorter then the bottom line:
THE COMPANY NAME
____________________________________________________________________
This is the name of the article | Date:04/17/2013
_____________________________________________________________________________
Here is the code:
#page {
size:letter;
margin-top: 0.8in;
margin-bottom: 0.5in;
padding: 5px;
border-top:#90aac5 solid 1px;
#top-left {content: element(leftHeader);}
#top-center{content: element(centerHeader);}
#top-right {content: element(rightHeader);}
}
#page-thisheader-center {
position:running(centerHeader);
border-bottom:#90aac5 1px solid;
font-size:9px;
height:52px;
color:#7e7f7f;
padding:2px;
}
#page-header-right {
position:running(rightHeader);
border-top:#90aac5 1px solid;
height: 25px;
font-size:9px;
color:#7e7f7f;
white-space:nowrap;
float:right;
padding-top:5px;
}
#page-header-left {
position:running(leftHeader);
border-top:#90aac5 1px solid;
height: 25px;
font-size:9px;
color:#7e7f7f;
float:left;
padding-top:5px;
}
.date {
height: 15px;
border-left: #90aac5 solid 1px;
float:right;
width:75px;
The tag looks like this for ids and classes above:
<div id ="page-header-left" align="left">
<div> <xsl:call-template name="get.title"/></div>
</div>
<div id ="page-header-right" align="right">
<div class="date"> <xsl:call-template name="get.date"/></div>
</div>
<div id ="page-thisheader-center">
<div> <xsl:call-template name="get.company.name"/></div>
</div>
I think that is all of it. I hope someone can help. I am totally stumped on how to correct the top line. Thanks!!
UPDATE
The short line is due to the longer titles wrapping. Is there a way to fix the #top-left, #top-center and #top-right margins to a fixed width so the title can wrap without causing the whole header to slide smaller/bigger depending on the title? BTW: I have tried whitespace: nowrap; on the #top-left margin but that just causes the whole header to slide off the right hand side of the page with long titles.
I hope this helps for a solution. Thanks in advance!!

Answer 1

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>