What's the best way to create a 2 column full width header layout

I want to get this website out of WordPress. I thought it might be easiest to use Backlight 5’s templated system, even though the website is not a photography/gallery site.

I started a layout in Pangolin, using a Page for the home page, but the layout has so many problems that I thought I should ask how to accomplish this before going any further.

Layout problems are:
Making the header full width and indenting both columns.
Aligning the columns - the right column is down a few pixels, and both are off centre compared with the header placement.

The copy is in Page Copy Main Copy and the right column is in Page Copy Pallet 01 Copy - should I put it somewhere else? What’s the difference between there and Copy in an Album Template?

Finally, should I use a different Type like Kookaburra or even Galleria?

You want the header image to span the width of the page?

As far as the page layout, if the information in the right column always needs to be on the page, then I wouldn’t use the pallet since on mobile devices, your viewers will need to know to tap the mobile menu button to see what you have.

Instead, I’d suggest using the Responsive Grid layout for your text:

Copy in an album template (or album set template) will appear in all albums (or album sets) using that template. Copy in a page (or album or album set) copy area will appear only in that page or album or album set

Guess that depends on what you’re after. If you need a Galleria slideshow on the page, then use Galleria.

The Responsive Grid mentioned above works in any copy area. (you need to enable it in Kookaburra in the page template under Advanced Setup > Grid Framework)

in the Layout section of the template, set Max-Width to the highest setting.
To control the width of the content (text), go to the Content area of the template.

That’s great - Matt built his own Bootstrap. I’ll read through it and give it a try, although the link on that page: “For a more thorough overview, see this post” goes to a page that says right at the top that the grid no longer works.

Yes I want the header full width like the existing site. When I set the max-width to full there’s still a border around the entire page, even though I’ve set all of the borders to 0, but it looks like the masthead-primary class still has a border unless it’s identityplate.

The code in that post was for a CE era grid so it doesn’t work in a Backlight created theme.
Use the code in the post I linked to above

The padding on the left and right of the header image is coming from your custom css on line 190:

img {
    border: 2px 650506 solid;
    padding:0 20px;
}

There’s also a border setting, but it’s not being applied because the color part is missing the preceding hash (#) on the hex code and that invalidates the border property for that rule

That css is being applied to all images. You can write some more specific css to remove the padding from the masthead image:

.masthead-primary img {
border: none;
padding: 0;
}

Oops, I thought I had stripped out all the CSS that was layout specific. I missed that one. Thanks.

I have two columns set up, how can I center them across the page? I’ve tried various methods but can’t get it to work.

can you post a link to the page? I’m guessing you may still be using a pallet, only it has no content, it’s just taking up space.

That what it looks like on the page Charles linked to earlier.

Ah, it’s back. When I looked a bit ago I got a 404.

Sure enough @Charles_I , you’re still using a two column layout in the Layout section of the template

The blue and green bars are place holders for the content. Currently set to col. 8 and col. 4 but I would like the two of them in the center of the page - not floating left. How do I create a wrapper that centers the content?

You just need to disable the pallet. Go to your page template and in the Layout area, change it from Two Columns to One Column.

That did it, thanks Rod. Makes sense that because I’m using the grid code I have to turn off the built-in grid.