Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

list on the right of a left floating image

Tags:

css

list

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?

like image 763
Paolo Benvenuto Avatar asked Oct 23 '12 14:10

Paolo Benvenuto


People also ask

What are floating images?

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.

How do I put text on the right side of an image in HTML?

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.

How do I float a left image in HTML?

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.

What does float left do?

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).


2 Answers

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

ul {
    padding-left: 1.2em;
    overflow: hidden;
}​
like image 93
mali303 Avatar answered Sep 22 '22 01:09

mali303


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;
}​
like image 38
Sri Avatar answered Sep 22 '22 01:09

Sri