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.
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.