Get a free trial // Grow your CSS skills // Land your dream job

CSS layout help

  • # May 2, 2008 at 3:19 pm

    Hi All.

    I have a photoshop mockup of my website at and I am having problems with coming up with a reasonable CSS layout.

    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.

    # May 2, 2008 at 5:39 pm

    I am not totally understanding the problem, but isn’t that you just have to reset the body margins?

    body {
    margin: 0;
    padding: 0;
    # May 3, 2008 at 11:30 am

    Thanks, unfortunately zero’ing out the margin/padding didn’t change anything.

    To try and make my problem more clear:

    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.

    Thanks again.

    # May 3, 2008 at 11:54 am

    I think i found the trick.

    Background-position: center 0

    This centered horizontal and at 0 from the top.

    # May 5, 2008 at 3:01 am
    "pghtech" wrote:
    I think i found the trick.

    Background-position: center 0

    This centered horizontal and at 0 from the top.

    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.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed