CSS and Flying Saucer header

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>