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.
Float:right divs appear on next line in IE only
A colleague of mine recently had a very similar problem. I recommended simply using positioning rather than floating. I believe you could do the same here:
<div style="background-color:red; position:relative;">
Text
<div style="background-color:yellow; position:absolute; right:0; top:0;">Right</div>
</div>
I don't know if you have a requirement to use floats or not. Using the positioning method will cause the positioned element to not take up space in normal flow, but otherwise keep the correct source order and visually accomplish what I think you want to do.
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.
IE7: floated span inside p dropping down a line (jsfiddle included)
You won't be able to do this in IE 7- with pure css.
The option of placing both elements in a conatiner, then floating the <p>
element left and the <span>
right is viable, but keep in mind that it won't achieve the same look that you want.
Is the idea behind this to have the date after a paragraph(s) with unknown height(s)? What are you trying to achieve?
Might I suggest doing something like this?
Floating a DIV right causes elements to wrap in IE7
It has to do with your reliance on display:inline-block;
which IE7 supports, just not always correctly. Actually, fix for it is pretty gross. But, as in this updated fiddle, it works.
Image wont float to the right properly in IE7
internet explorer needs a defined width on each floating element for calculate.
.csc-textpic-imagewrap{
width:120px;
}
IE7 float bug? Menu won't float-right in IE7
set the menu ul {display: inline; float: right; rest of the declarations here}
Related Topics
How to Add Background Images in a Jsf Application Using Richfaces and CSS
Make Second Div Appear Above First, Without Absolute Position or Changing HTML
CSS Sticky Header/Footer and Fully Stretched Middle Area
How to Fade-Out the End of a Text Line in CSS
CSS Float, Clear a "Row" of Floating Elements
Internet Explorer Box Model - What Is Offset
Target IE9 or IE8 But Not Both Using CSS
Chrome 83: Change Colors of New Form Styling
Seek to Specific Keyframe in CSS3 Animation
What This CSS Code Means (Font-Size Division)
Use HTML Tag Names, Classes or Ids in CSS
How to Center Variable Width Divs in CSS
How to Create a CSS3 Gradient in Opera
Rgba Background with Ie Filter Alternative: IE9 Renders Both!
Colspan Messes with Fixed Width Table
Sass Mixin for Animation Keyframe Which Includes Multiple Stages and Transform Property