Clean CSS fix of IE7's 'float: right' drop bug

Question

I continuously find myself having problems with elements floated right in IE7.

I have read many Stack Overflow questions which are similar to this one but there doesn't seem to be any consistently clean CSS answers.

What I mean by this is is I want to see answers which DO NOT change the HTML. E.g:

• Put the floated element first
• Add a 'clear: both' div after the floated element.

I understand that sometimes the floated element doesn't account for its parents height and therefore sometimes fails to contain it properly. Occasionally I find myself 'adding layout' to an element with zoom: 1 which sometimes fixes it. Other times I find myself messing about in a conditional IE7 style-sheet which isn't the best fix in my opinion.

Note: What I mean by 'having layout' - http://www.satzansatz.de/cssd/onhavinglayout.html

I have also read other answers to do with using relative and absolute positioning (parent div and child div respectively). This pulls it up but often affects surrounding divs.

I would be happy to add a bounty to this question if someone can give an in depth explain as to the reasons this happens and a detailed discussion of the various fixes, IDEALLY CSS ONLY!

Many thanks!

EDIT

The most common problem I encounter is when I have something like this:

Left Sidebar - Main - Right Sidebar

Right will often drop when floated. Ideally this should be in the format Left - Right - Main, but I continuously find myself styling developers work (Drupal mainly) where this is the case and it is too much hassle to get them to change their work. Make sense? Because I'm styling developers work they never put the clear block in too (which personally I think is horrible and dirty anyways!)

Answer 1

Introduction

Your title indicates a desire to see a fix for the float: right drop bug, but your text implies some broader scope desire to see solutions to “problems with elements floated right in IE7.” There are many general problems with floated elements (right or left) in that browser. Even though one may question whether support of the IE7 browser is worthy of much attention any more, it undoubtedly will remain so for some people for some time. Therefore, I’m going to take the opportunity here to address numerous issues at once regarding floats in that browser. Note that many experiments and references below come from an excellent resource: http://www.brunildo.org/test/index.html.

CSS for the Containing Element

For a containing parent to the floated element the following css should be set:

.container {
    overflow: auto; /* forces clearing of the child float */
    zoom: 1; /* give it layout (this can be some other css that does likewise) */
}

Making sure it hasLayout is important to prevent types of margin and padding errors, a type of peek-a-boo bug, and allowing the overflow to clear. For a sequence of floats, some html may need changing if padding on the container is desired to work properly.

With regards to one “drop” issue with a float: right, you may want to avoid setting an explicit height or max-height on the container. A min-height is okay. Setting a height and then having the float be taller than the container makes IE7 not behave with following elements. There is no pure css solution that I have found noted.

If the container is itself position: absolute there can be issues with positioning a float that may require that float itself to be set to position: absolute instead of being floated.

References:

• For overflow to clear -- http://www.quirksmode.org/css/clearing.html
• Margins -- http://www.brunildo.org/test/IEFloatAndMargins.html
• Peek-a-boo -- http://www.brunildo.org/test/iew_boo.html and http://www.brunildo.org/test/iew_boo3.html
• Float sequence padding -- http://www.brunildo.org/test/IEmfloa.html
• Avoiding height -- http://austinmatzko.com/2007/07/25/internet-explorer-7-float-bug/, http://www.brunildo.org/test/fenc7.html (and his similar problem link on that page).
• Container is absolute -- Floating Too Far Right!

CSS for the Floated Child

For a the floated child element, the css (besides float: right) to set depends on two things:

Absolute Container

Again, as noted above, a containing parent that is absolute may require a change in how the child is handled.

Float is Also a Clearing Element

If the float is also going to have a clear set on it, then there are numerous issues that can arise depending totally upon the html and css of the elements around it. There is no single canonical fix, so look at the references below.

References:

• Container is absolute -- Floating Too Far Right!
• Also having clear -- http://www.brunildo.org/test/IEWfc.html, http://www.brunildo.org/test/IEWfc2.html, http://www.brunildo.org/test/IEWfc3.html

CSS for Child Elements of Container Before the Float

If the float: right follows an element in the html structure that should be to its left (and not above it), then that preceding element(s) must be float: left.

CSS for Child Elements of Container After the Float

A Clear Element

For an element after the float that has clear set, then if it has padding and background-color, make sure it also hasLayout to avoid a doubling of the padding; also this prevents extra space above the clear due to container padding, and avoids other margin issues.

References:

• For padding -- http://www.brunildo.org/test/IEClearPadding.html and http://www.brunildo.org/test/IEFloatClearPadding.html
• For margins -- http://www.brunildo.org/test/Op7_margins_float.html (look down the page for IE7)

A Paragraph Before a Clear Element

Having a paragraph with a margin-bottom and shorter in height than the float, located between the floated element and a clearing element, can create an extra gap between the clear and the float equal to that margin. There is no known pure css fix other than giving the paragraph a zero bottom margin (which may not be acceptable if the paragraph may go taller than the float).

Reference:

• Paragraph following -- http://www.brunildo.org/test/IEFloatClearMargin.html

Conclusion

I cannot guarantee I have addressed every issue that may occur with a right floated object, but certainly many major ones are covered. As to “why” these things happen, it is all “bugginess` in IE7.

Answer 2

Have you tried to use the clearfix solution to collapsing divs? There are variations on this and there is a newer version but I don't have the url to hand, but this is standard clearfix css which you add to the parent element that is collapsing and causing issues with floated elements http://www.webtoolkit.info/css-clearfix.html. Chris Coyer has a better version here http://css-tricks.com/snippets/css/clear-fix/.

You say "I understand that sometimes the floated element doesn't account for its parents height and therefore sometimes fails to contain it properly" this is kind of true, the parent will collapse if all child elements are floated. This is due to the elements being removed from the normal flow, when this occurs the parent div is unable to calculate its height and collapses as if there isn't anything inside of the div.

But without seeing the page and the issue you are having I can only estimate that the issue is due to IE6-IE7's haslayout property which is really annoying, they sorted it out from version 8 upwards but it does add extra development time to your build.

But in most situations the clearfix solution is best as it doesn't add extra markup to the page such as

<div style="clear: both"></div> 

this is old and out of date and should be avoided.

I hope this helps you, if you need any more information or I have not answered the question just ask.