How to indent list items using CSS when you have floating blocks?

Question

I observed a relative strange behavior when I use floating images in a document. The list items indentation is made relatively to the 'red line' instead of the 'green' one.

Why is this happening and can I solve this?

<img style="float: left">
<p>some text</p>
<ul>
   <li>aaa</li
   <li>bbb</li
</ul>
<p>some other text</p>

Monolithic

Answer 1

Just add ul { list-style-position: inside; } because by default it is set to outside, not sure why.

Stupefacient

But <li>s that wrap to a second line will be flush with the left of the bullet instead of with the text on the previous line. – Ten

Answer 2

I think you probably need to change the list style position to inside.

Americanize

Answer 3

Combination answer of a few things I managed to dig up to make this work.

HTML:

<div>
    <img src="bleh.jpg">
    <ul>
        <li>This is a test of something with something to do something</li>
        <li>This is a test of something with something to do something</li>
        <li>This is a test of something with something to do something</li>
    </ul>
</div>

LESS:

img {
    float: left;
}

ul {
    list-style-position: inside;

    li {
        position: relative;
            left: 1em;
        margin-bottom: 1em; margin-left: -1em;
            padding-left: 1em;
        text-indent: -1em;
    }
}

Clari

This is the best solution i know to make this working for long lines. A small improvement would be to add margin-right: 1em; to the li, so the li is not too long in relation to surrounding text. – Otoscope

Answer 4

This worked for me, from: http://enarion.net/news/2012/css-perfect-indented-line-ulli-around-a-floating-image/

Chrome, Firefox etc:

ul { list-style-position:inside; margin-left: 2px; display: table; }
ul li {margin-left: 13px; text-indent: -12px; }

Internet Explorer:

<!--[if IE]>
   <style>ul li {margin-left: 19px; text-indent: -18px; }</style>
<![endif]-->

Multifoliate

Answer 5

On ul element you can use overflow: hidden; to make display more like a box than just a text, and padding-left: 1em; to push it from the left side.

.image {
  float: left;
  width: 50%;
  height: 200px;
  background-color: gray;
  margin-right: 20px;
  margin-bottom: 20px;
}

ul {
  padding-left: 1em;
  overflow: hidden;
}

<div class="image"></div>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales sodales facilisis. Ut a risus vitae massa scelerisque elementum. Quisque finibus posuere tempus. Suspendisse rutrum quam faucibus, tincidunt neque vitae, porttitor urna.
</p>

<ul>
  <li>Nunc vulputate libero vel molestie dapibus.</li>
  <li>Proin pellentesque orci rutrum erat iaculis, eu porttitor lectus congue.</li>
  <li>Morbi neque arcu, congue posuere vestibulum ac, pulvinar nec lectus. Aenean nulla magna, elementum ut leo vel, tincidunt finibus enim. Aliquam pretium justo et lectus malesuada vestibulum at non tellus.</li>
  <li>Nunc vulputate libero vel molestie dapibus.</li>
  <li>Proin pellentesque orci rutrum erat iaculis, eu porttitor lectus congue.</li>
</ul>

<p>
Nunc vulputate libero vel molestie dapibus. Proin pellentesque orci rutrum erat iaculis, eu porttitor lectus congue. Curabitur ut tincidunt justo, nec mattis diam. Praesent suscipit scelerisque enim, at aliquet diam accumsan ut. Morbi neque arcu, congue posuere vestibulum ac, pulvinar nec lectus. Aenean nulla magna, elementum ut leo vel, tincidunt finibus enim. Aliquam pretium justo et lectus malesuada vestibulum at non tellus. Etiam vel libero scelerisque, bibendum massa sit amet, fringilla odio. Nam eu sem massa.
</p>

Clayclaybank