Grow your CSS skills. Land your dream job.

How to overlap floats?

  • # November 26, 2008 at 4:28 pm

    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

    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

    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

    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)

You must be logged in to reply to this topic.

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