I have a page layout I'm trying to replicate that has running elements in the @top, @bottom and @left regions.

It's working pretty well, but the @bottom region doesn't fill the full width of the page, even if I set the width. This works on pages with only @top/@bottom regions containing content - I set the @bottom width to 8.5in and it fills the page. But in this example there's about a .75" gap to the left. (see attached screenshot)

I thought it had something to do with there being content in the @left region, but then why isn't the gap the same width as that region?

This is the CSS I'm using:

@page named-page {
  margin: 1.5in 1in 1in 2.5in; 
  
  @top { 
    content: flow(cover-letter-header);
    padding-right: 1.5in;
    width: 8.5in;
  }
  
  @left {
    border: 1px solid green;
    content: flow(cover-letter-left);
    vertical-align: top;
  }
  
  @bottom {
    border: 1px solid red;
    content: flow(intro-footer);
    vertical-align: bottom;
  }
}

The red and green borders were just for my testing purposes so I could see the actual boundaries of the regions.

1. Appraisal_Report_Template_-_Import_from_Word_pdf.jpg‎ 242.1 kB

Hi,

You can set margin-left: -2.5in on the bottom region (or whatever value works if you are also setting the width). Does that help?

Mark

Edited 6 Aug 2020 by markbrown

Yes that helps! Thank you.

For some reason I had to set the margin-left to -1.5in, but it works