## Long word breaking float in IE

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

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

#id1 {
float: left;
width: 65%;
border: 1px solid #000080;
background: #ffcc00;
}
#id2 {
float: right;
width: 30%;
border: 1px solid #008000;
background: #ccccff;
}


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 box on the left has a long word.

Output in Firefox 3.6

The sidebar with its ID as id2 is intact in Firefox even though the long word has spilled outside the box on the left. However, the layout breaks in Internet Explorer 8 as can be seen below.

Output in Internet Explorer 8

The fix involves allowing long words to break and wrap.

#id1 {
float: left;
width: 65%;
border: 1px solid #000080;
background: #ffcc00;
word-wrap: break-word;
}


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

Output in Firefox 3.6

Output in Internet Explorer 8
[css]