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?
Floating image An image that can be dragged around the page at will, with text flowing round it. Although it can be moved around, a floating image has an anchor point in relation to which its position is measured. You can tell whether an image is Inline or Floating by selecting it.
in order to have text on the left or right of the image you can style your img as style="float:left"; or style="float:right"; If the text is too close to the image you can play with padding: 10px; or less.
To use a floating image in HTML, use the CSS property float. It allows you to float an image left or right. More property values include the following: Sr.No.
The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).
You can try with adding overflow hidden in ul tag http://jsfiddle.net/2z6Zn/61/:
ul {
padding-left: 1.2em;
overflow: hidden;
}
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With