DAK what is supposed to happen when:
a. a <div> (or other block element) is floated right in some containing block
b. an unfloated <div> or other block in the text which follows the floated <div> is too wide to fit alongside the floated <div> (but is not wider than the containing block)?
In the example below, the <div> following the ‘blah’ text stays with text and overflows the floated <div>, whereas the <img> stops at the base of the floated <div> and does not try to rise further (and hence overlap it).
The <div> following the blah text can be made to stay below the floated <div> only by using display: “inline-block”. I realize that <img> is a replaced element but can’t see why it should behave differently from the awkwardly-behaving <div> or why the latter <div> should overflow the floated <div> and not stay below it when it doesn’t ‘fit’.
(If you have a suitable test.gif, please try it for yourself!)
<html>
<head></head>
<body>
<div style="width:600px">
<div style="float:right;width:400px;height:200px;border:solid yellow"></div>
blah<br />
blah<br />
blah<br />
blah<br />
<!-- the following <div> sticks to the 'blah' text and overflows the floated div -->
<div style="width:400px;height:100px;border:solid green"></div>
<!-- but the following img stops at the base of the floated div and does not overlap it-->
<img src="test.gif" style="width:400px;height:100px;border:solid blue"/>
</div>
</body>
</html>