2 DIVs using percent width, floated (left/right) against each other, why does IE drop the right DIV, sometimes
Here's an example:
<div id="wrapper">
<div id="left">
<h1>Left</h1>
</div>
<div id="right">
<h1>Right</h1>
</div>
</div>
CSS:
#wrapper {
width: 100%;
}
#left {
float: left;
width: 30%;
}
#right {
float: right;
width: 70%;
}
This problem only occurs at very precise browser widths. I do not have test values, I just keep resizing the window until it happens.
Answers:
You've encountered the IE6 float bug, like Martyr2 said. The only workaround I've seen (other than the obvious "switch to Firefox" <grin>) is to make sure the floated divs don't *quite* add up to 100% of the container div's width. So in your example, make #right have width: 69%. The 1% gap is usually not noticeable.
Yeah IE6 has long been known to have problems with rendering items using the CSS float style. This has been known on the net as the infamous "IE6 float bug" and while I have not yet upgraded to IE7, I have heard reports that Microsoft has attempted a solution to fix these problems... which doesn't help much for a large portion of the web visitors who still use IE6.
You may very well be right about a rounding issue because it does mimic that type of behavior. However, I have not seen a solid solution to fix this and most people recommend just upgrading to IE7.
Sorry there isn't more. Hope this answer helps.
The answers information post by website user , IEanswers.com not guarantee correctness.