This article is in draft form and is very unfinished.
Chris Wilson, as Chair of the new W3C HTML WG, stated on :
"We can't, for example, change the behavior of how we support CSS floats in IE7 without requiring an opt-in, since we would change layout significantly for half the web. When we break the web, it's our fault, even when we're breaking it to improve standards compliance."
Update: This bug is fixed in IE8.
Here we go IE float art. In all seriouness though, when half the web becomes broken the example below will hopefully look right.
A Float left
width:40%
BFR
C Float right
width:55%
More Content
Clear left c1
D FL CR c2
E Float right
width:55% w1
More Content
F FL CL
G Float right
Clear right
H Float left CR c3
I FL CL
J Float right
width:60%
Clear left c4
K FL CRc5
L Float left
Clear left
M Float Right
Clear left c6
N Float left
width:30%
Clear right c7
O Float right
Clear left c10
All things are well as we start, but before long troubles begins. We find that box [C] fails to clear box [A], and this results in it covering box [B]. Following one failer by another, box [D] fails to clear box [C] and now sits over it.
One might wonder when viewing this page in IE, which way box [E] is floating, as it sits to the left of box [C]. In fact this is set up by box [C] failing to clear box [A], but that shouldn't prevent box [E] from sitting below box [3] since their combined width equals 110 percent. Some faith is restored though, since box [F] manages to clear box [A]
Box [J] floating right fails to clear box [H] floating left, and together they cause the sussesions of boxes that move out of the page to the right.
Just like box [D] and [C], box [K] fails to clear box [J] and now sits over. The are several reasons for this can be in the examples below. At this point IE just seems to pile box on top of box, enought said concerning IE.
For the browser that support the float model, this layout is quite simple. Even though the these headings and paragraphs comes later in the source than the floats, the position of the headings and paragraphs are relative to the positioning of the floats. This remains so even after text resizing.
If you have only seen the above example in IE7 or IE6, please take a look now at the same example in Firefox, Opera or Safari. You will be in for a shock. Please note how the text [A-Z] and boxes [A_Z] stay relative to each other even after text resizing. Each green box marked c1 etc shows where IE fails to clear. If you have only seen the above example in a standard compliant browser, take a look at it in IE7 and see a heaped up mess.
A float will sit next the a previous float if there is enought space to do so, but it the space is not enought, the float will drop below the previous float. If the combined widths of consecutive floats is greater than 100 percent, the later float will appear below the earlier float. If non floated content follows these two consecutive floats, this content should flow around both floats. In IE though this does not happen.
Float left
width:70%
Float left
width:70%
The text in this paragraph should begin near the top of the previous float and flow down the right side of the each float until it then appear below the last float. Not in IE though, where it begins near the top of the second float.
A simple way around this is to have the later float clear the earlier float which results in content following, flowing around both floats.
Float left
width:70%
Float left with clear both
width:70%
This is almost identicle to the previous example, apart from one difference, the second float has the style {clear:both;}.
The next example shows when you would want a float and clear on the same element. If the second float was not clearing the first float then if the viewpoint is widen enough, the second float would jump up and sit to the right first float as in example 2d.
Float left
width:50%
Float left with clear both
width:200px
Some text Some text Some text Some text Some text Some text Some text Some text.
Float left
width:50%
Float left
width:200px
Some text Some text Some text Some text Some text Some text Some text Some text.
If both containers are floated right, the actual container enclosing both floats will expand on the left side.
Float Right
width:70%
Float Right
width:70%
Some text Some text Some text Some text Some text Some text Some text Some text.
But adding a clear to the second float corrects the bugs of the expanding container and where the paragraph begins.
Float Right
width:70%
Float Right with clear right
width:70%
Some text Some text Some text Some text Some text Some text Some text Some text.
Floating consecutive containers is opposite directions can cause many float bug to appear. With IE you can not have two consecutive containers floated in opposite directions, with a combined width of greater then 100 percent. As with example 3 and 5, any content following these consecutive floated containers will only flow around the later float.
Float left
width:70%
Float right
width:70%
The text in this paragraph should start near the top and flow down the right side of the blue float until it reaches the green float and then reappear below the blue float and flow down the left side of the green float. Not in IE7 though, where it begins below the blue float.
Unlike example 2b having the later float clear the earlier float will break the layout. The behavour is explained further on a test page on Bruno Fassino's site, please see example 3, 8a and 11b on this page IE/Win: Problems with float + clear on the same element.
Float left
width:70%
Float right with clear left
width:70%
The text in this paragraph should start near the top and flow down the right side of the blue float until it reaches the green float and then reappear below the blue float and flow down the left side of the green float. Not in IE7 though, where it begins below both the blue float and the green float. The green float happens to be also sitting to the right of the blue float and running off the page.
As with example 4a, the actual container in the next example enclosing both floats will expand on the left side.
Float right
width:70%
Float left
width:70%
The text in this paragraph should start near the top and flow down the left side of the green float until it reaches the blue float and then reappear below the green float and flow down the right side of the blue float. Not in IE7 though, where it begins below the green float.
As with example 4b having the later float clear the earlier float will break the layout but this time in a different way since now the first float is overlaping the second float. The behavour is explained further on a test page on Bruno Fassino's site, please see example 5, 7a and 10b on this page IE/Win: Problems with float + clear on the same element. If the first container has position relative the second float overlaps the first float
Float right
width:70%
Float left with clear right
width:70%
The text in this paragraph should start near the top and flow down the left side of the green float until it reaches the blue float and then reappear below the green float and flow down the right side of the blue float. Not in IE7 though, where the blue float happens to be partially covering the green float.
With IE you can not have two consecutive containers floated in opposite directions, with a combined width of lest then 100 percent and have the later float clear the first float. The text should begin to the top right of the blue float flowing down it's side the swap over to flow down the left side of the green float with should be clearing the blue float. Obviously IE can not do this simple clearing and shows a very different rendering to the standard compliant browsers.
Float left
width:40%;
Content
Float right with clear left
width:40%;
Clear both
some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text.
And the reverse to the previous example.
Float right
width:40%;
Content
Float left
width:40%;
Clear both
some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text.
This example is caused by the bug in example 7, thus displacing the second of the two floated right divs.
A Float left
width:40%
C Float right
width:55%
Clear left
More Content
More Content
E Float right
width:55%
More Content
More Content
Let me requote Chris Wilson.
When we break the web, it's our fault, even when we're breaking it to improve standards compliance
How can an improvement in IE being more standards compliance, actually break the web when the web is already broken because of IE's non standards compliance. Which part of the web would be broken anyway, I would think your not refering to the great number of websites that do not have any pages with Doctypes and use nested tables for layout. These pages will not be broken by an improvement in IEs' CSS standards compliance.
This article was created on the 30th of May, 2007 and last updated in draft form on the 7th of March, 2009
Author: Alan Gresley