Forum How do I...?

Full width @bottom region when also using @left region?

quiredan
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.jpg242.1 kB
markbrown
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 by markbrown

quiredan
Yes that helps! Thank you.

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