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
  • #23660

    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

    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.)


    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.


    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 :)


    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..

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