Forums

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

Home › Forums › CSS › How to overlap floats?

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • November 26, 2008 at 4:28 pm #23660
    Oskar
    Participant

    I need help building a stretching 100% width header. The problem is that the header-image looks different at the left and right ends. It looks like this.

    My (nasty?) attempt has been to use three divs. Two for the two stretching ends and one for the mid. You’re able to see my attempt at lyf.dk/wp.

    I’ve made the two ends have 48% width and float:left/right respectively (spelling). Now, I’ve just dropped supporting IE6 with this one but I can’t get IE7 to follow either.

    It renders the two ends fine but the mid-header below instead of on top. How can I achieve this? If I set position: absolute; I can’t center it. If I use <body> instead of a seperate div for the mid-header its below the two ends so that doesn’t work either.

    Any help would be greatly appreciated (even for IE6 should anyone have the time surplus of life I lack today.)

    November 26, 2008 at 5:05 pm #51474
    chazzwick
    Member

    wouldnt it be easier just to redesign the image so it is the same on both sides. then you could just have a single x-repeating image, with the banner image on top.

    November 26, 2008 at 5:56 pm #51479
    Oskar
    Participant

    Indeed, that way there wouldn’t be any problems and it could very well be the solution to this problem. However, now I’m getting frustrated/annoyed I can’t achieve an uneven header.

    But thanks :)

    November 26, 2008 at 6:45 pm #51483
    tcindie
    Member

    So long as the divs are either absolutely or relatively positioned, you can use z-index to put whichever layer on top that needs to be there..

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