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

[css]

No comments

Post a comment

RSS