5

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?

1
  • keep them in different div's...
    – Mr_Green
    Oct 23, 2012 at 14:10

2 Answers 2

9

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

ul {
    padding-left: 1.2em;
    overflow: hidden;
}​
2
  • reading here I don't understand how the "overflow: hidden" property work in this case. Could you explain me o give me a hint? thank you! Oct 25, 2012 at 12:31
  • float on image push only contents in ul element but not the whole ul, it takes 100% available space as a block level element. you can verify it by inspect element. Thats why left margins are not working on ul. This is not a bug, you can see more details here: bugzilla.mozilla.org/show_bug.cgi?id=57882. Overflow hidden ensures to hide empty area of ul
    – mali303
    Oct 25, 2012 at 15:20
1

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;
}​
3
  • No, I need to get, at the right of the image, the bullet aligned with the <p> text. Oct 23, 2012 at 18:34
  • Updated answer... Is that you looking for?
    – Sri
    Oct 23, 2012 at 19:46
  • Explain once again, how would you want? Thanks
    – Sri
    Oct 25, 2012 at 13:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.