IE7 Float Right Problems

IE7 float right problems

You need to float both elements and clear it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
</head>
<body>
  <div style="border: 1px solid red; width: 100px;">
    <a href="#" style="border-color: blue; float: right;">bar</a>    
    <a href="#" style="float:left;">foo</a>            
    <div style="clear:both;"></div>
  </div>
something
</body>
</html>

Or simply put the floating element in front of the normal element like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
</head>
<body>
  <div style="border: 1px solid red; width: 100px;">
    <a href="#" style="border-color: blue; float: right;">bar</a>    
    <a href="#">foo</a>            
  </div>
something
</body>
</html>

Brief Explanation:

Pardon my english and drawing, but here's briefly how float and clearing works in cross browser:

An element can be floated left or right. When you have element floating, the element doesn't push "normal" content downwards. See why -

Float and clear:

alt text

Legend: Orange/Float Right, Blue/Float Left, Gray Lines/Clear divider, Red Rect/bounds

In this case, you have 2 elements of one line text - one float left, and the other float right. When floating, it will not push the contents downwards aka taking space. Thus if you do not use clear:both at the gray lines, the contents below will stack upwards between the 2 floating elements and thus may not be what you want.

When you use clear:both below the floats, the content below the floats will be pushed as far as whichever float element is of highest height. This is shown in the diagram's 2nd and 3rd section.

Float only:

alt text

Legend: Orange/Float Right, Blue/Normal content, Gray Lines/the line that is divded with the next, Red Rect/bounds

The blue normal content is already by default text-align: left;. Thus it is left oriented. You need the float to be in front of the normal content because you're telling the browser to float from this line.

You should experiment different conditions to see its effect: putting float in front, behind, float left right, clear both, clear right and left.

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

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.

float: right in IE7 dropping to a new line

Try to small change markup: place items with a float before items without it (from the same row). It should help.

IE7 image float right in positioned container

It appears as though IE7 is not allowing the img to overflow to the left side of the #left wrapper even though it has float: right applied. So the narrower width of the wrapper div compared to the wider width of the img is keeping it from doing anything but aligning its left edge to the left edge of the wrapper. The fix for this can be seen in this fiddle, where I have added a negative margin-left equal to the img width:

#left img {
    border: 0px;
    float: right;
    margin-left: -640px; /* <-- equal to img width */
}

I recommend doing this in a targeted way only to IE7. While it did not seem to adversely affect either Firefox or IE9+ (I did not test Webkit), it did cause issues in display for IE8. Since it is not needed for the other browsers, then using conditional comments or some other means of targeting IE7 for this CSS should be used.

css bug in IE with float:right or similar

It's still irritatingly unclear.. why does nobody understand this? http://sscce.org/

Do you have a doctype as the very first line? Without one, you're in Quirks Mode, and you'll have (what I think is your) described behaviour in all versions of IE.

If you don't have a doctype, add one as the very first line such as <!DOCTYPE html>. That will fix your problem in IE9 and IE8.

Here's your jsFiddle, and it already works fine in IE9/8: http://jsfiddle.net/TGGFh/

That's because jsFiddle adds a doctype - view the source of: http://fiddle.jshell.net/TGGFh/show/light/

So, I think your actual problem is only in IE7.

As far as fixing IE7 goes, the easiest fix is to (in the HTML) move your span with float: right to before your two images.

See: http://jsfiddle.net/TGGFh/4/

Internet Explorer 7 css/html float bug

Yes... it looks like a float-caused problem.

Try adding this line into your HTML, just before the footer:

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

I think it is expecting an item that clears the floats.

IE7 Float Right Problems