CSS layout help

My main problem is that the pink header/banner has unique graphics all the way across. I have made it 1800px wide to accomodate any large resolutions.

The problem I had when I cropped out the page width of the banner as the header DIV that it didn’t line up with the body background image. THis was because the background top left corner starts at your screen resolutions corner and therefore the body background is pushed further to the right and ends up not lining up with the portion that is in the header.

I have also thought about placing the whole banner as a separate (relative positioned) DIV physically #wrapper div at the width of the banner (1800px). It creates a scroll bar on the page, but I believe this can be removed – and this might be the only way to go.

Any suggestions on how to achieve the mockup in CSS layout?

NOTE: I came up while typing this the idea that you put the body in a class and tell the background image to be set absolutely.

What I call the "header/banner" area is the pink horizontal bar with the name and menu on it. You will notice it extends to the left and right exceedingly far (exactly: 1800px) to try and accommodate most resolutions. I did this so that I can make the left and right side of the bar that is outside of the main content page part of the body background.

However, when I cropped this out of PS, and put it as the body background, then took the banner section that is immediately above the page and put it as the background to a Header DIV, the left and right sides of the header DIV background did not match up graphically with the left and right areas of the body background.

I realized this was because the body background top left corner starts at your monitor’s top left corner. So it caused the body background to be pushed further to the right and the header DIV background section of the banner didn’t line up.

I hope that is a better explanation?

So possibly what you stated as a suggestion might work and I am about to try it.

The bottom line: I want to make the body background center horizontally. So no matter what monitor size you have the body background will line up exactly the same. Then when you center the #wrapper DIV that has all the corresponding DIV’s (specifically the Header DIV in this case) the background image of the Header DIV will always line up with the body background.

That’s the trick indeed. ;)
Aligning a div in the center and removing the scrollbars (overflow:hidden) is not a good solution. People with small resolutions or not-maximized windows can’t view the whole width of the page and can’t scroll either.

Tips

What now? I have some ideas for you.

Go explore CodePen!

As a front end designer and developer, you should have an account on CodePen so you can save your snippets, present your ideas, and engage with the rest other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.

Get the newsletter!

You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an RSS feed, iTunes, and lots of other ways to subscribe.

Listen to ShopTalk!

Subscribe to The Lodge!

The Lodge is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.

We can do the real footer now.

Site Links

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.