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.

[css]

No comments

Post a comment

RSS