Float Squeeze Weird Gap Bug

Affected Versions

This bug affects: IE7, IE6

Symptoms

A gap appears between last and second last floated elements that are stacked vertically.

Date of the Tutorial

Tue Aug 18 12:27:50 2009

Description

I am certain that this bug is caused by the same issue as the "Float Squeeze Duplicate Last Character Bug" as the setup is the same and the only difference is the number of floated elements (has to be more than three). The reason I created a separate tutorial for this bug is because it manifests itself differently as well as the solution is different. Let's look at the demo:

Demo

The demo is available on a separate page

HTML Code:

<div>
    <p>
        <span>A</span>
        <span>B</span>
        <span>C</span>
        <span>D</span>
    </p>
</div>

CSS Code:

div {
    width: 100px;
}

p {
    margin-right: 1px;
}

span {
    border: 1px solid #000;
    float: left;
    width: 120px;
}

The setup is as follows: we have an element - <div> in our demo - that has certain width set. Inside that element we have another one - <p> - with margin-right set to anything but zero (in IE6 margin is not needed for the trigger). Inside that <p> we have four or more elements with float property set to value left and width set to a larger value than we have set on our <div>. What happens in affected browsers? A weird gap appears between the last and second last floated elements (in our demo that would be "C" and "D" <span>s).

Solutions

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

Solution (Clean Solution)

Date of the Solution

Tue Aug 18 12:28:06 2009

Fixed Versions

All of the affected

Description

While proposing the fix in this solution, I will assume that due to "Expanding Width Bug" in IE6, the solution will not cause any side effects. If you are not supporting IE6, the bug is easily fixed in IE7 by giving our <p> "layout". Let's the the demo for fixing the bug in both IE6 and IE7:

Fixed demo is available on a separate page

HTML Code:

<div>
    <p>
        <span>A</span>
        <span>B</span>
        <span>C</span>
        <span>D</span>
    </p>
</div>

CSS Code:

div {
    width: 100px;
}

p {
    margin: 0 1px 0 0;
    width: 125px;
}

span {
    border: 1px solid #000;
    float: left;
    width: 120px;
}

What I did here is added width to our <p> (the container of floats) with the value that is larger than that of the floats. The width needed to contain the bug needs to be a "magic number" larger than the overal width of floated elements (that is their width plus padding and border if any of those are set). This magic number seems to be 3px. We have 120px width floats and 1px surrounding border set on them; this gives us 122px, add the magic number and we get 125px - solves the bug in both, although in IE7 the fix may be not related to the value of width but is fixed by "layout" that width gives.

Comments

nick

Thu Jun 14 06:35:15 2012

Add a background attribute to the floating elements to solve this bug.
N/A

Thu Feb 16 15:20:55 2012

set background on div and you see that the container does not contain the floats
in ie6 it does always regardless of width applied to p element set cleardiv at bottom container and thats the proof
N/A

Wed Apr 20 23:59:56 2011

Maybe,you should set
div {
width: 125px;
}
Why do you set 100px?