Grow your CSS skills. Land your dream job.

header not full width (it must) Please

  • # June 14, 2012 at 9:20 pm

    Hi, I am working on this website, and I need the header of the website to be full width. I have tried for a while, but nothing seems to work for me. Any eyes? The slider needs to be lowered, so it does not get cut off. Like http://www.ge.com/

    My website is: http://bit.ly/L6r1tu

    Thanks,

    # June 14, 2012 at 9:30 pm

    You have a div with the id of header1 which has width: 100%;

    You have another div within that one that has an id of just header which has width: 960px;

    Maybe that fixed width is your problem?

    -Mike

    # June 14, 2012 at 9:43 pm

    Like stated above, use a wrapping div.







    # June 15, 2012 at 12:45 am

    Solution


    #header1 {
    z-index: 11;
    }

    Explanation
    There is a wrapper #header1, and it is stretching the full 100% width with a white background as intended. The problem is that ul.slides has a z-index of 10, which means it (and the giant image inside) renders on top of #header1 but below #header.

    The reason the inner #header is not covered up is because you assigned it a z-index of 11, which is greater than the z-index of 10 for ul.slides. Therefore the stack order in which these elements are rendered goes from top to bottom as follows:

    #header with z-index: 11
    ul.slides with z-index: 10
    #header1 with no z-index (defaults to auto)

    The band-aid fix is to give #header1 a z-index greater than 10 in order to have it render above ul.slides. In general, though, I would clean up all those z-index declarations if possible. It can make things real messy real quick.

    # June 15, 2012 at 9:10 am

    Thank you, that did the trick!

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".