hasLayout.net

Affected Versions

This bug affects: IE7

Symptoms

elements with layout clear floats instead of going around floated elements

Date of the Tutorial

Mon Aug 17 14:47:09 2009

Description

Here's a bug that I spotted on Gérard Talbot's IE7 Bug Collection Page. Even though I was aware of the bug as the trigger for it is actually used for float clearing, I've decided to publish Gérard Talbot's demo along with a somewhat flaky solution that, hopefully, could help someone solve this problem. Let's have a look:

Demo

The demo is available on a separate page

HTML Code:

<p id="floated">
    This is a left floated block.
</p>
<p id="text">
    This text should flow around the floated block, on its right
    side and below. This text should flow around the floated block, on its
    right side and below.
</p>

CSS Code:

#floated {
    float: left;
    width: 6em;
    margin: 1em;
}
#text {
    width: 14em;
}

In sane browsers the #floated ' element"><p> will appear to be inside the #text ' element"><p> - that's the way it is supposed to be. In IE7, due to "layout" on #text (from width), #text will "scare" away and be on the side of the #floated, as if we would have overflow: hidden or overflow: auto on #text.

Solutions

Below are solutions for the above bug ordered by the solution type.

Solution (Clean Markup Solution)

Date of the Solution

Mon Aug 17 14:58:01 2009

Fixed Versions

All of the affected

Description

The solution involves getting rid of "layout" from #text. Let's see how we accomplished that in our demo:

Fixed demo is available on a separate page

HTML Code:

<div id="container">
    <p id="floated">
        This is a left floated block.
    </p>
    <p id="text">
        This text should flow around the floated block, on its right
        side and below. This text should flow around the floated block, on its
        right side and below.
    </p>
</div>

CSS Code:

#floated {
    float: left;
    width: 6em;
    margin: 1em;
}
#container {
    width: 14em;
}

What I did is add an extra element - ' element"><div> #container - around both #text and #floated, then I moved width from #text onto #container effectively rendering the same demo as the original.

I admit, this isn't exactly a "solution", but rather a case-example. Since the bug is caused by "layout" the solution would involve getting rid of it, and methods for accomplishing it would definitely vary.