IE negative margin/float bug

[kurtcruse]

I'm having trouble with elements overlapping in both IE 6 and 7. I took my code and broke it down to a very simple form to demonstrate the problem.

My major content area is liquid, with a fixed width sidebar on the right. Where I start to run into trouble is when I put any floated elements inside my content area. As I lessen the width of my browser window the white boxes in my code should bump down one at a time once the sidebar starts to fill their space but in IE the sidebar floats overtop of the white boxes.

here's the code

<style type="text/css" />
#FCholder { width: 100%; border: 1px solid red; }
#FCwrapper { float: left; width: 100%; background: blue; }
#FCcontent { margin: 0 141px 0 0; background: green; }
#FCbuttonHolder { float: left; width: 141px; margin-left: -141px; background: yellow; }
</style>

<div id="FCholder">
<div id="FCwrapper">
<div id="FCcontent">
<div style="width: 200px; height: 100px; background: white; float: left; margin: 10px;"></div>
<div style="width: 200px; height: 100px; background: white; float: left; margin: 10px;"></div>
<div style="width: 200px; height: 100px; background: white; float: left; margin: 10px;"></div>
<div style="width: 200px; height: 100px; background: white; float: left; margin: 10px;"></div>
</div>
</div>
<div id="FCbuttonHolder">
Sample text Sample text Sample text Sample text Sample text Sample text Sample
</div>
</div>

Thanks in advance for any help.

[edited by: tedster at 5:50 pm (utc) on May 22, 2008]

[kurtcruse]

Eureka!

Ok so I still don't know how to fix this particular bug but instead I went about constructing my page using some absolute positioning. So the main content area would have a right margin of 200px and the right column would have a width of 200px and be absolutely positioned in the upper right corner of the container which hold it and the content.

[SuzyUK]

Hi kurtcruse and Welcome to WebmasterWorld!

this IE Bug is THE IE bug which is hasLayout!

FCbutton holder is negatively floating into FCwrappers space, FCwrapper is 100% wide.

FCcontent should be clearing the right space because of the margin but in IE it's confused as to its role in life. You need to give it a prod and trigger hasLayout to true on it... you can do this by floating it too which is what I would likely do as I'm a great believer in if using floats, use them everywhere, they contain themselves and usually play nice together ;) - or you can set

zoom:1; 

on it if you don't mind using the MS propietary properties.

Absolute Positioning the menu/sidebar may well work but if the menu is longer than the content it will stick out the bottom, which id what the negative floating layouts avoid.