I've been working on this layout, and all is going well, except for one small issue. I have a sidebar floated to the right, and another div that is not floated. I would like to have the non-floated div overlap the floated sidebar by about 15px. Of course this works in all of the browsers except the IEs. Here is a dummied down version of the code that illustrates my point. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="new-main.css" /> <title>Template</title> </head> <body> <div id="mainContainer"> <div id="contentContainer"> <div id="sidebar"> </div> <div id="content"></div> </div> </div> </body> </html> HTML: CSS: /*###### GENERAL STYLES ########*/ html,body { margin: 0px; padding: 0px; z-index:0; } * { margin:0px; padding:0px; } /*##### LAYOUT STYLES ####*/ #mainContainer { width:980px; margin:auto; background:green; } #contentContainer{ width:954px; background:url(/assets/images/body-mid.png) repeat-y; margin:0 auto 10px auto; position:relative; overflow:auto; background:red; } #sidebar{ width:225px; height:673px; margin:0px 3px 0px 0px; padding-left:18px; float:right; position:relative; z-index:4; display:inline; border:solid green 1px; overflow:hidden; background:blue; } #content{ width:700px; background:#ccc url(/assets/images/bg-sidebar.png) repeat-y right; height:100%; padding-right:15px; padding-top:1px; z-index:5; position:relative; min-height:637px; height:auto !important; height:637px; } Code (markup): Some of the styles may be unnecessary, but I took my entire code, and then removed all of the classes and ids that weren't necessary. As you can see, IE bumps the content container below the float. Normally, I just adjust the sizes so that they can co-exist side-by-side, but I would really like to be able to overlap the content container over the sidebar like it is in FireFox. Any ideas?
The only thing I can think of is to remove all Haslayout triggers on the content box. Normally, a non-floated block should slide right under the float. Like the parent container, it can't see the float because the float's only attached to the page at its top-- the rest sticks up above the page, like a Post-It note. However, in IE, if Haslayout is triggered on that non-floated content, it treats it almost as if they were both floated-- and if both were floated, they would fight for space and one would push the other down if there's not enough room for them to sit side-by-side. http://stommepoes.nl/floaties.html shows this visually if you have both a Modern Browser and then IE to look in. The problem of course is that you have "height" declared like 4 times on that thing. All triggering Haslayout (what exactly was your reasoning with the height: 100% (on a box without a set-height parent), then all this: min-height:637px; height:auto !important; height:637px; ?? None of those make any sense, though it looks like the bs hack for height. If you need to set a min height, do #element { min-height: blah; } * html #element {height: blah;} Much easier, send height to the retarded IE6 and use min-height for everyone else. But here, like I said, you don't want to set height. Keep the box without Layout in IE. For your bg image, this would mean it would not stretch all the way down like you obviously want it. So, it may have to be moved to the background container instead (who hopefully is enclosing its floats, and thus is at least as long as all its floated children?). The only other way I can think of is, for IE only, with either hack comments or an IE stylesheet, absolutely position the content. This will take it completely out of the flow, meaning even in IE it can't fight the float for room. As a by-product, it'll have a naturally higher z-index than the sidebar, so it'll naturally sit on top of it anyway. (you could then remove position: rel and the z-index from the sidebar)
You are correct. That was a "hack" for min-height. I'll clean up my CSS to your recommendations. And see if it works. I really appreciate your input.