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 :confused:
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 (http://alistapart.com/articles/doctype).

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 (http://www.w3.org/TR/CSS2/visuren.html#floats).


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/floatutorial/introduction.htm

Hope that makes sense.

[jlizarraga]

Thank you for your help.

[tomlindevs]

Hi all,

I'm a bit of an amateur / newbie in web design but getting better and just getting to grips with CSS. I have a similar issue, my page consists of three elements within a container, which is taken from Dreamweaver CS3's templates: .thrColLiqHdr . The middle (main content) div drops down in IE6 irrespective of removing the width for the whole container or altering the two sidebars to percentages or pixels. No element within the middle (main content) div is more than 295 pixels. The code is thus:

/* Tips for mainContent:
1. the space between the mainContent and sidebars is created with the left and right margins on the mainContent div.
2. to avoid float drop at a supported minimum 800 x 600 resolution, elements within the mainContent div should be 300px or smaller (this includes images).
3. in the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This avoids several IE-specific bugs.
*/
.thrColLiqHdr #mainContent {
margin: 0 24% 0 23.5%; /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the sidebar spaces when the content in each sidebar ends. */
padding: 5px;
border: thin none #660000;
font-weight: normal;

Try as I might I cannot avoid the drop. Any ideas?