2

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.

1 Answer 1

0

If you set the line height and font, it seems to work better: http://jsfiddle.net/cWXge/

This looks identical in Firefox and Chrome in Ubuntu.

1
  • True, setting the line-height to the same height as the spacers will work. However, I simplified my example a bit to much, because I want to be able to flow text with varying line-height, e.g. embedded <h2> tags, without having all text line-heights be a multple of 10px; See for example jsfiddle.net/JwXke/28
    – Gabriel
    Oct 4, 2011 at 12:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.