CODEWITHSUNDEEP
htmlcsscss-float
David Basarab
David Basarab

Reputation: 73311

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

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?

Upvotes: 1

Views: 1522

Answers (5)

user36457
user36457

Reputation:

try this in the <ul> tag

style="margin-top: 70px"

alt text

i've only got IE6 since i'm on xp, i imagine ie7 will be a better than 6 (we can hope at least). Old IE versions handle block-level elements awkwardly, the new versions are better with this. Block level elements should take their own full line, like a <p> tag. If you want to see which tags are block level you can either put this line in your css to take a quick peak:

* {
border: 1px solid black;
}

or download the Web Developer addon for firefox, it has a bunch of nifty tools and it has a "highlight block level elements" feature built right in, which puts different colored borders around your elements.

Upvotes: 1

Zack The Human
Zack The Human

Reputation: 8481

The text does float around the image for me in IE6 and FireFox2. Is there any CSS that you're leaving out for us to test?

Here is what I see:

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

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

If you are trying to make all of the text line up with the right side of the image, you may need to float your text's container left as well. That will produce an output like this:

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

You can do this by modifying your code like this:

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

Upvotes: 2

nickf
nickf

Reputation: 546085

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.

Upvotes: 4

Jonathan Lonowski
Jonathan Lonowski

Reputation: 123473

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;">.

Upvotes: 0

Matt Mitchell
Matt Mitchell

Reputation: 41823

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:

Upvotes: 0

Related Questions