IE Float model and the reality

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.

Example 1: How Internet Explorer handles floats

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

Heading

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.

Heading

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]

Heading

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.

Heading

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.

Heading

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.

Consecutive floats where the combined width is more than 100 percent

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.

Example 2a: Div Floated left followed by another Div Floated left

This text is here just to prevent another IE bug

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.

Example 2b: Div Floated left followed by another Div Floated left

This text is here just to prevent another IE bug

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.

Example 2c: Div Floated left followed by another Div Floated left

This text is here just to prevent another IE bug

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.

Example 2d: Div Floated left followed by another Div Floated left

This text is here just to prevent another IE bug

Float left

width:50%

Float left

width:200px

Some text Some text Some text Some text Some text Some text Some text Some text.

Example 3a: Div Floated right followed by another Div Floated right

If both containers are floated right, the actual container enclosing both floats will expand on the left side.

This text is here just to prevent another IE bug

Float Right

width:70%

Float Right

width:70%

Some text Some text Some text Some text Some text Some text Some text Some text.

Example 3b: Div Floated right followed by another Div Floated right

But adding a clear to the second float corrects the bugs of the expanding container and where the paragraph begins.

This text is here just to prevent another IE bug

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.

Consecutive Containers floated in opposite directions

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.

Example 4a: Div Floated left followed by another Div Floated right

This text is here just to prevent another IE bug

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.

Example 4b: Div Floated left followed by another Div Floated right

This text is here just to prevent another IE bug

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.

Example 5a: Div Floated right followed by another Div Floated left

This text is here just to prevent another IE bug

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

Example 5b: Div Floated right followed by another Div Floated left

This text is here just to prevent another IE bug

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.

Floats floasting in one direction not clearing floats floated in the opposite direction

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.

Example 6:

This text is here just to prevent another IE bug

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.

Example 7:

And the reverse to the previous example.

This text is here just to prevent another IE bug

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.

Example 8: Another Float Bug

This example is caused by the bug in example 7, thus displacing the second of the two floated right divs.

This text is here just to prevent another IE bug

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