If there are two HTML div elements placed side-by-side using float: left and float: right, a long HTML element in one of the div elements breaks the floating property of the other in Internet Explorer 6.

Here is a sample page that demonstrates this issue: http://susam.in/files/notes/css-hacks/long-nontext-and-sidebar/long-nontext-and-sidebar.html. Here is the CSS used for both the HTML div elements.

#long {
    width: 154%;
    height: 20px;
    border: 1px solid #000000;
    background: #008000;
}
#id1 {
    float: left;
    width: 65%;
    border: 1px solid #000080;
    background: #ffcc00;
    padding: 2px;
}
#id2 {
    float: right;
    width: 30%;
    border: 1px solid #008000;
    background: #ccccff;
    padding: 2px;
}

In each output shown below, the box on the left has its ID as id1 and the one on the right has its ID as id2. The green box within the first box has its ID as long.

Screenshot of the output in Firefox 3.6
Output in Firefox 3.6

The sidebar with its ID as id2 is intact in Firefox even though the green div element has spilled outside the id1 div element. However, the layout breaks in Internet Explorer 6 as can be seen below.

Screenshot of the output in Internet Explorer 6
Output in Internet Explorer 6

This issue may be caused by any type of long non-text content in one of the div elements. The long green div element here is only an example. Another such examples could be a very long image.

The fix is simple. Overflowing content should be clipped with overflow: hidden style in the div element where such long non-text content is expected.

Here is a page that demonstrates the fix: http://susam.in/files/notes/css-hacks/long-nontext-and-sidebar/long-nontext-and-sidebar-fixed.html.

Screenshot of the output in Firefox 3.6
Output in Firefox 3.6
Screenshot of the output in Internet Explorer 6
Output in Internet Explorer 6

This issue occurs when padding: 0 property is applied to a ul element. The bullet symbols do not appear.

Here is a sample page that demonstrates this issue: http://susam.in/files/notes/css-hacks/list-padding/list-padding.html. Here is the CSS used for both the HTML div elements.

ul {
    padding: 0;
    list-style: none;
    color: green;
    background: #ffdd88;
}
ul.circles {
    list-style: circle;
    color: maroon;
    background: #ddff88;
}

The second list in each output below uses the circles class.

Screenshot of the output in Firefox 3.6
Output in Firefox 3.6
Screenshot of the output in Internet Explorer 6
Output in Internet Explorer 6

The output in Internet Explorer 6 gives a clue about the issue. It shows that padding: 0 property is applied around the text only, and not around the text together with the bullet points. Thus, the bullets of the list with circles class are present beyond the left border of the list. The fix therefore simply requires adding some extra padding to the circles class.

ul.circles {
    list-style: circle;
    color: maroon;
    background: #ddff88;
    padding-left: 15px;
}

Here is a page that demonstrates the fix: http://susam.in/files/notes/css-hacks/list-padding/list-padding-fixed.html.

Screenshot of the output in Firefox 3.6
Output in Firefox 3.6
Screenshot of the output in Internet Explorer 6
Output in Internet Explorer 6

This issue occurs in Firefox, Chrome, IE6 as well as IE7 when float is applied to an element inside a div element.

Here is an example:

div {
    border: 1px solid #0000aa;
    background: #333333;
}

h1 { margin: 0; float: left; border: 1px solid #00ff00; color: orange; }

A sample web page can be found here: http://susam.in/downloads/files/css-hacks/float-containment/float-containment.html

Output in Chrome 11
This can be fixed as follows:
div {
    border: 1px solid #0000aa;
    background: #333333;
    overflow: hidden;       /* Fix for Firefox, Chrome and IE7 */
    display: inline-block;  /* Fix for IE6 */
}

div { display: block; /* Fix for IE6 */ }

h1 { margin: 0; float: right; border: 1px solid #00ff00; color: orange; }

The fixed web page can be found here: http://susam.in/downloads/files/css-hacks/float-containment/float-containment-fixed.html

Output in Chrome 11 after fix
Another solution that works in most cases involves including a div element with clear: both property within the containing div with broken containment. But this can cause an issue in IE6 if this containing div element has position: relative as well as a background attribute.

Example CSS:

div {
    border: 1px solid #0000aa;
    background: #333333;
    position: relative;
}
h1 {
    margin: 0;
    float: right;
    border: 1px solid #00ff00;
    color: orange;
}
Example HTML:
<div>
<h1>Lorem ipsum</h1>
<div style="clear: both; border: 0"></div>
</div>
border: 0 property is necessary in this particular case to override border: 1 for all div elements set in the style element. Thanks Lalit for noting this.

However, with position: relative in the containing div element this is what we get in IE6. The h1 element is hidden behind the div element.

The example for this can be found here: http://susam.in/downloads/files/css-hacks/float-containment/float-containment-fixed-with-clear-div-breaks-with-relative-position.html. This issue won't occur if either background or position: relative is not used in the CSS for the containing div. This can be fixed by adding z-index: -1 property to the div element.

From #math channel on irc.freenode.net this morning:

<oops> I have a confusion. the calculation that was giving me 2
bits earlier
       is not giving me 2 bits now. :( please help.
<oops> 4 equally probable symbols: so 4 * (1/4) * log(1 / 1/4),
right?
<antonfire> yeah math changes sometimes.
<antonfire> probably a math storm
<antonfire> wait a few minutes and try again
<_Ray_> try logging out and back in
<oops> so, so 1 * log(4) = 2
<oops> oh it is giving me 2 bits again
<mariano|syzygy> hmmm, actually he was not his advisor
<oops> thanks, nvm.
<sig^> try switching math off and on again
<thermoplyae> haha
<_Ray_> yeah, it was the router

RSS