Why do my list item bullets overlap floating elements

Solution 1:

I have found a solution to this problem. Applying an ul { overflow: hidden; } to the ul ensures that the box itself is pushed aside by the float, instead of the contents of the box.

Only IE6 needs an ul { zoom: 1; } in our conditional comments to make sure the ul has layout.

Solution 2:

Adding an improvement to Glen E. Ivey's solution:

ul {
    list-style: outside disc;
    margin-left: 1em;
}
ul li {
    position: relative;
    left: 1em;
    padding-right: 1em;    
}​

http://jsfiddle.net/mblase75/TJELt/

I prefer this technique, since it works when the list needs to flow around the floating image, while the overflow: hidden technique will not. However, it's also necessary to add padding-right: 1em to the li to keep them from overflowing their container.

Solution 3:

This is where the "display" property comes into its own. Set the CSS below to make the list work alongside the floated content.

display: table; works alongside floated content (filling the gap) but without hiding content behind it. Much like a table does :-)

.img {
  float: left;
}

.table {
  display: table;
}

<img class="img" src="https://via.placeholder.com/350x350" alt="">
<ul>
  <li>Test content</li>
  <li>Test content</li>
  <li>Test content</li>
</ul>
<ul class="table">
  <li>Test content</li>
  <li>Test content</li>
  <li>Test content</li>
</ul>

EDIT: Remember to add a class to isolate which lists you wish to do this for. E.g. "ul.in-content" or more generally ".content ul"