Header Image and Links Separate from the journal

[sireesanwar]

I'm trying to figure out how to make my header image section and navbar section full screen while the rest of the journal is a specific width. I've actually done it before but for the life of me can't remember what the coding was to accomplish this style.

You can see my layout at workshop_rees.

Comments

[fueschgast]

#header {
position: absolute;
left: 0;
}

#maincontent, #sidebar {
padding-top: 50px;
}

[sireesanwar]

Hm. That isn't how I remember accomplishing it but it is effective.

Would it be possible to prevent the header image and navbar from scrolling with the rest of the layout.

I know fixed would do it but wouldn't that interfere with the absolute property?

[fueschgast]

You can just change to fixed, it won't interefere with the width. But when .headerimage is fixed, you need to give ul.navheader top padding to move it under the header image und move the background color and possibly other things from #header to ul.navheader.

[sireesanwar]

Okay. I think I've got it. If I can't figure it out I'll get back to you.