Why List item going to Image?

Question

Why gose to image's flow

This is code:

    <p><img class="left" width="95" height="64" src="#" />
    some text here some text here some text here some text here some text here some text here
    </p>

    <ul>
       <li>some text here some text here some text here some text here some text here some text here some text here
      </li>
    </ul>

Answer 1

Because you're floating the image left. That's what happens. The bullet is behind the picture.

Answer 2

Presumably because a CSS rule-set that applies to the element includes the rule float: left

Answer 3

Remove class="left" :)

Answer 4

Probably because

• the image is float: left

• either the <ul> or the <li> or both is display: inline

I assume you want to keep the left float of the image. To get the <ul> onto its own line, you could give it a display: block; clear: left; to sort it out.

Answer 5

If you have control over the .left class, add some padding or margin to the right side of the image.

.left {float:left;padding-right:2em;}

or

.left {float:left;margin-right:2em;}

The exact amount of padding/margin you need depends on how the list is styled - you want to add enough so that the list bullet doesn't overlap the image, but the paragraph and other stuff doesn't go too far to the right.

Which of padding-right or margin-right to use depends on what else is going on in the page, what browser(s) you are using, and somewhat also on personal preference. Try each and see which one works better in your situation.