Forum Moderators: not2easy
<p>sits level with the second block in IE? As far as I can tell the specs agree with Firefox and Opera in that the second
<p>jumps up to the top.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
body { width: 500px; }
.block { float: right; clear: right; width: 250px; height: 250px; }
p { border: 2px dashed red; }
.block.one { background-color: blue; }
.block.two { background-color: green; }
</style>
</head>
<body>
<div class="block one"></div>
<p>A first paragraph of test text.</p>
<div class="block two"></div>
<p>A second paragraph of test text.</p>
</body>
</html>
I can't explain, except to say it's IE :o.
I agree with you about the recs and the expected behaviour. However I wonder if it's not just IE and their "this will be the author's most likely desired behaviour" syndrome. They never did get the the Float Model right and had built in a method of clearing floats with their haslayout property which is what most graphic designers actually like and had to look for other methods of clearing floats in other browsers.
Looks like with this one there is something built into the clear property for this particular scenario they are assuming that because there is a new block of text you want to clear it to a new line, I suppose most might in a screen situation, but it doesn't help when the browser tries to out think the recs!
if solutions are actually required, putting all the floated elements first in source is one way, and a down and dirty solution is to add a non-semantic [empty element] float without clear just before the float with clear applied to it.
Suzy
<p>s and second
<div>placement in my example will be under the control of the user so there's not really much I can do here I think. Will probably just have to let the customer know about the situation so they can tailor their content to fit...
