After encountering a larger issue, I found that I could reduce it to a simpler scenario:
To see the problem in action, check out this jsFiddle link: http://jsfiddle.net/uUGp6/
Here is the simplified HTML code:
<div class="box">
<img class="pic" src="http://i3.minus.com/jbuwgurDfNniFM.png"/>
Test 1
this is a test: testa testb testc testd teste
</div>
<div class="divider"/></div>
<div class="box">
<img class="pic" src="http://i3.minus.com/jbuwgurDfNniFM.png"/>
Test 2<br/>
this is a test testa testb testc testd teste
</div>
And here is the corresponding CSS:
.box {
background-color: beige;
float: left;
margin-right: 10px;
height: 100px;
}
.pic {
float: left;
}
.divider {
clear:both;
height:10px;
width:500px;
background:blue;
}
When viewed in Firefox, Chrome, and Safari, the text in the second box wraps around. A new line starts after "testc." However, in Opera, IE9, and IE8, there is no wrapping.
The only difference between the two boxes is the inclusion of a br tag in the second box.
I am puzzled as to why the text wraps in the second box but not in the first, despite the first box containing a much longer line. What role does the br tag play in this issue? Is there a way to make all browsers display the content consistently?
Additionally, which browsers handle this situation correctly?
Just to note, the floats are crucial as this is a simplification of a larger problem I am facing.
For reference, I am conducting these tests on Windows 7.
Edit: I have observed that the text also wraps in Safari.