Why is Text flowing inside of an image with float: left; not wrapping?

Question

I have the following HTML

<div>
    <img id="image1"
         src="http://valleywag.com/assets/resources/2008/03/BlackGoogleLogo.jpg" 
         alt="Why doesn't this float correcly?"
         style="border-width: 0px; float: left;" />
    <div id="divText" style="font-family: Arial, Helvetica, sans-serif; font-size: 11px;"
          class="txt-Normal">
        <div style="background-color: Green; color: White;">
            <p>
                <strong><span style="font-size: xx-large;">This is going to be big title</span></strong>
            </p>
            <ul>
                <li>
                    <span style="font-size: small;">Foo</span>
                </li>
                <li>
                    <span style="font-size: small;">Bar</span>
                </li>
                <li>
                    <span style="font-size: small;">FooBar</span>
                </li>
                <li>
                    <span style="font-size: small;">BarFoo</span>
                </li>
            </ul>
        </div>
    </div>
</div>

The text does not float around the image. It does not matter whether the browser IE or Firefox.

How can I fix this to float around the image?

Answer 1

The text is wrapping around the image for me in Firefox2. Can you maybe post a screenshot so I understand the problem better?

If you mean the bullets overlap the image (which I do notice) then the best I can suggest is margin-right on the image or disable the bullet-style:

Answer 2

I'm guessing it's cause the margins are collapsing, since the list marker appears in the margin.

You might try using <ul style="margin-left: 291px;">.

Answer 3

If you're talking about the bullets overlapping the image, you can either increase the margin-right on the image, or change your lists to have list-style-position: inside.