CODEWITHSUNDEEP
cssimagelist
Paolo Benvenuto
Paolo Benvenuto

Reputation: 417

list on the right of a left floating image

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?

Upvotes: 5

Views: 8390

Answers (2)

mali303
mali303

Reputation: 605

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

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

Upvotes: 9

Sri
Sri

Reputation: 2273

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;
}​

Upvotes: 1

Related Questions