hasLayout.net

Affected Versions

This bug affects: IE7, IE6

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 <p> will appear to be inside the #text <p> - that's the way it is supposed to be. In IE6 and 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 - <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.

Lastly, I'd like to add that by removing "layout" from the element you may run into "Disappearing Content Bug"; since we can't fix that bug by giving "layout", you could try adding { position: relative; } instead. If that fails, you may need to rethink your approach.

Comments

• Travis

  Wed Apr 27 05:29:57 2011

  Doesn't really solve the problem as often the containing element can't have a fixed width.

Donate / Buy My Books

If you found materials on this site useful, please consider donating a few bucks to the author. Thank you.

Alternatively, purchase my book: