I am trying to get text to flow in an irregular shape, and have used empty floats in a manner which I think ought to work:
<!DOCTYPE HTML>
<html>
<head>
<style type='text/css'>
.leftspacer { height:10px; background-color:red; float:left; clear:left;}
#container { width:100px; font-size:9px;}
</style>
</head>
<body>
<div id='container'>
<div class='leftspacer' style='width:10px;'></div>
<div class='leftspacer' style='width:20px;'></div>
<div class='leftspacer' style='width:30px;'></div>
<div class='leftspacer' style='width:40px;'></div>
<div class='leftspacer' style='width:50px;'></div>
<div class='leftspacer' style='width:40px;'></div>
<div class='leftspacer' style='width:30px;'></div>
<div class='leftspacer' style='width:20px;'></div>
<div class='leftspacer' style='width:10px;'></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus cursus felis id odio porta facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut suscipit euismod vulputate. Vivamus a enim sit amet dui aliquam semper ac sit amet metus.
</div>
</body>
</html>
(Hosted at http://pastehtml.com/view/b9fetgtmk.html)
It works OK in Firefox, and even IE9, but in webkit browsers (Safari Win 5.1 and Chrome 14.0.835.187) I find that the text does not flow correctly around the div.leftspacer elements. You can see that some text is drawn over the top of the red background of the spacers. It looks like the position of each line of text is only being calculated for the top pixel of each character, and not the whole height of the characters.
It seems like it is a bug. Am I right? Maybe someone can suggest what I am doing wrong, and more importantly, is there any workaround?
EDIT: I should have specified: I want to be able to have different sized text flowing around the floats, and so cannot be fixed to any specific character/line height.