Clever Geek Handbook

Why is the text flowing inside the image with float: left; not a wrap?

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 doesn't matter if the browser is IE or Firefox.

How can I fix this to float around the image?

+1


source to share


5 answers


Text floats around the image for me in IE6 and FireFox2. Is there any CSS you leave to test?

This is what I see:

Example 1 http://img214.imageshack.us/img214/6906/ff2topie6bottomhz5.gif

The provided HTML example is in the HTML document correctly? If so, what doctype are you using?



If you are trying to make all the text lines on the right side of the image, you may need to leave your text container as well. This will create an output like this:

Both are Floated http://img518.imageshack.us/img518/4619/bothfloatedsd7.gif

You can do this by changing your code like this:

<div id="divText" style="font-family: Arial, Helvetica, sans-serif; font-size: 11px; float:left;" class="txt-Normal">
+2


source


If you're talking about bullets overlapping the image, you can either zoom margin-right

in on the image or modify your lists to have list-style-position: inside

.



+4


source


try this in tag <ul> 

style="margin-top: 70px"

alt text http://i38.tinypic.com/303d9x1.png

I only have IE6, since I'm on xp I think ie7 will be better than 6 (we can hope at least). Older versions of IE handle block level elements inconveniently, newer versions are better with this. Block level elements must have their own complete line, such as a tag <p>

. If you want to see which tags are blocky, you can put this line in your css for a quick pick:

* {
border: 1px solid black;
}

or download the web developer addon for firefox, it has a lot of useful tools and it has "highlight box" elements built on the right that creates different colored borders around your elements.

+1


source


The text wraps around the image for me in Firefox2. Can you post a screenshot to better understand the problem?

If you mean the bullets are overlapping the image (which I notice), then the best I can suggest is the right edge of the image, or turn off the bullet style:

0


source


I guess this results in step by step marks as the list marker appears in the box.

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

.

0


source






More articles:


All Articles