If there are two
div elements placed side-by-side using
float: left and
float: right, a long non-text block in one of the
div elements breaks the
float for the other.
Such layouts are very common on the web. An example is this notes blog of mine in which you are reading this post. The content area inside which this blog post is present has a
float: left style applied on it whereas the sidebar on the right hand side of the page has
float: right style applied on it.
An example CSS along with screenshots of the issue follow:
#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 the outputs from a sample web page at:
http://susam.in/downloads/files/css-hacks/long-nontext-and-sidebar/long-nontext-and-sidebar.html shown below, the box on the left has ID as "id1" and the one one the right has ID as "id2". The green box within the first box has ID as "long".
Output in Firefox 3.6
The
id2 sidebar is intact in Firefox even though the green
div element has spilled outside the
id1 div element. However, the layout breaks in Internet Explorer as can be seen below.
Output in IE 6
This issue can 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 the fixed CSS.
#id1 {
float: left;
width: 65%;
border: 1px solid #000080;
background: #ffcc00;
padding: 2px;
overflow: hidden;
}
An example of the fixed web page can be found at:
http://susam.in/downloads/files/css-hacks/long-nontext-and-sidebar/long-nontext-and-sidebar-fixed.html
Output in Firefox 3.6 after the fix
Output in IE 6 after the fix