list on the right of a left floating image

Question

I want to properly position an ul list on the right of a left-floating img using outside list property, but the bullets aren't aligned on the right of the image, as where there isn't any image, but more on the left.

<img style="float: left; margin-right: 0.1em;" src="http://commons.cathopedia.org/w/images/commons/thumb/f/fe/Carnevale_di_Venezia.JPG/250px-Carnevale_di_Venezia.JPG" />
<ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
    <li>Lorem ipsum dolor sit amet, cnsectetur cnsecteturcnsectetur um dolor sit amet, consectetur adipiscing elit</li>
</ul>

See the fiddle for a better understanding.

I cannot modify html, only css.

I don't want to put the list property to inside.

If I add a right margin to the image, the not-ul text is moved too, and I don't want it.

If I add a left margin or padding to ul or li, the lists which aren't on the right of an image are moved inward too, and I don't want it.

How do I manage it?

Answer 1

You can try with adding overflow hidden in ul tag http://jsfiddle.net/2z6Zn/61/ :

ul {
    padding-left: 1.2em;
    overflow: hidden;
}​

Answer 2

Demo

Is that you looking for? I am not sure.... Check this and explain more if you need to add more...

img {
    float: left;
    margin-right: 1.9em;
     position: relative;
}

li {
    list-style-position: outside;
}
ul {
    padding-left: 1.2em;
}​