The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS header not full width (it must) Please

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #38513

    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

    My website is:



    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?




    #header1 {
    z-index: 11;

    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.


    Thank you, that did the trick!

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.