Treehouse: Grow your CSS skills. Land your dream job.

[Solved] CSS layout help needed.

  • # March 4, 2010 at 4:32 pm

    Hey guys. I lurk like there’s no tomorrow, but I finally need some help.

    I’m designing a website for a class project and I stretched the background image to touch the sides of the browser at any size. However, a horizontal scroll bar continues to show up. I’ve tried modifying every height and width option I can find in my style sheet and, what once was a page that validated perfectly is now full of issues. If anyone could help me out, that would be awesome.

    The site is

    Happy hunting.

    # March 4, 2010 at 4:47 pm

    Having a container with a width of 100% is what is throwing it off. Specifically, because you’ve also set padding (which counts as width) and left: 100px;.

    If you go width:90%; and give it a margin:0 auto; to center it, that’ll work better.

    (all of this is referring to the #Container div)

    # March 4, 2010 at 6:21 pm

    Hey Doc,

    Thanks for the help. The #Container change definitely helped. I have another question for you, as well.

    I wanted the title to remain all the way at the top as a fixed item on the page (basically a heading on the page, no different from simple text). When I add the title to the top, it produces a white bar below. I know I need to set a z-index to pull it on top, but how should I go about doing that?

    I’m thinking, on the CSS:

    .Centered {
    height: auto;
    width: auto;
    position: relative;
    z-index: 1 (or 2?);

    Thanks for any help!

    # March 4, 2010 at 8:02 pm
    height: 100%;
    top: 225px;
    left: auto;
    position: relative;
    z-index: 1;}

    If you remove ‘top: 225px’ everything will move up to the top of the page (I think that is what you were asking)

    And are you talking about the white bar below "NERD"? That is the only white bar I can see, and that is part of the image.

    # March 4, 2010 at 8:07 pm


    As far as I know, when I created this image, it consisted only of the black bar with the word "NERD" stenciled in. I’m not sure why the white bar is showing up. Looks like it’s back to the image-editing room. Thank you! I’ll come back and update if there are still placement issues.

    # March 9, 2010 at 9:37 am

    Sorry to keep asking for help-it seems I keep running into the same problems and my eyes aren’t picking up the improper code (after staring at it for hours)…

    The title and content of the webpage have disappeared behind the background image. I have set z-indexes to pull them up front, but they are still not showing up. Any help from someone? is the website.

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

You must be logged in to reply to this topic.