The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Programming Fundamentals" Dec 02 - 2:00 PM Eastern

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

    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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed