IE6's Float Drop - is there a real fix?

[jlizarraga]

Hi all,

I've found over a dozen articles/discussions saying that the way to fix IE6's float drop is to avoid the things that would trigger it. I'm wondering if an actual fix exists, because I can't find one.

Say you have a 1000px width div, with two inner divs, div1 and div2. div1 needs to have 100% width, and div2 needs to have a fixed width and be floated right.

In IE6, this situation will always result in the float drop. I need the background color of div1 to expand all the way across the container and behind div2.

The only "fix" I've found is to set div1's display property to "inline", but that kills the 100% width.

Does anyone have a solution?

Thanks!

[rangana]

I've found over a dozen articles/discussions saying that the way to fix IE6's float drop is to avoid the things that would trigger it. I'm wondering if an actual fix exists, because I can't find one.

What's float drop
Can you show us a sample code of this existence.

Say you have a 1000px width div, with two inner divs, div1 and div2. div1 needs to have 100% width, and div2 needs to have a fixed width and be floated right.
In IE6, this situation will always result in the float drop. I need the background color of div1 to expand all the way across the container and behind div2.

It does'nt makes sense. A width of 100% means the width of it's parent container. So, if you set your parent container's width to 1000px, and you set div1's width to 100%, then it will take 1000px.

The only "fix" I've found is to set div1's display property to "inline", but that kills the 100% width.

Does anyone have a solution?

Thanks!

I can't really provide a fix, not unless a code is visible.

And also, never miss a DTD.

Hope that makes sense.

[jlizarraga]

Here is the exact example I described:

http://autofusion.com/development/mm3/test.html

So simple, yet so hard to solve!

[rangana]

Remove highlighted:

#div1 {
	width: 100%;
	height: auto;
	background-color: #000000;
	color: #ffffff;
}

[jlizarraga]

Sweet, thanks a bunch.

But it only works for my case. Check the link again and try to solve it!

[rangana]

What you have now is erroneous.

Div1 and Div2 are contained in container div whose width is (only) 1000px.

You set div1's width to 900px and div2's width to 200px which sums to 1100px.

With that said, you have an extra 100px. So the fix is by reducing the widths either of div1 or div2 a 100px.

Hope that makes sense.

[jlizarraga]

Doesn't floating div2 take it out of the flow? Shouldn't its width not matter since its floated? Firefox and Safari and the validator think so.

[jlizarraga]

Am I confused about floats? Do I need to use absolute positioning for div2?

[rangana]

Doesn't floating div2 take it out of the flow? Shouldn't its width not matter since its floated? Firefox and Safari and the validator think so.

No, the width will matter since floated element is laid out according to the
normal flow (The content will flow down the page, starting with the first
element in your document and finishing with the last element in your document),
then taken out of the flow and shifted either to the left or to the right.

You should always set a width on floated items (except for images which has implicit width).
The spec states a floating box must have an explicit width.

Am I confused about floats? Do I need to use absolute positioning for div2?

The solution suggested on post#6 should have worked (tested on IE6,7,FF, Safari and Opera).
I don't usually advocate the use of absolute positioning since it gives your page a brittle layout. The element
does'nt observe the normal flow.

For further reading:
http://css.maxdesign.com.au/floatuto...troduction.htm

Hope that makes sense.

[jlizarraga]

Thank you for your help.