Why do my list item bullets overlap floating elements

Question

I have an (XHTML Strict) page where I float an image alongside regular paragraphs of text. All goes well, except when a list is used instead of paragraphs. The bullets of th

Answer 1

Try list-style-position: inside to change the layout of the bullets.

Answer 2

Add display:table; to ul:

ul{display:table;}

Answer 3

Edited to update based on OP's comment

ok, then just break it up into 2 divs nested together

ul  {background: blue; position:static;}
.therest {position:relative; width:100%}
.indent {float:left; }

<div class="therest">
<p>
Est tincidunt doming iis nobis nibh. Ullamcorper eorum elit lius me delenit. 
</p>
<hr />
<h3>Lorem</h3>
<div class="indent">
<ul>
<li>list element</li>
<li>list element</li>
<li>list element</li>
</ul> 
<div>
the rest now under the UL
</div>

try changing the ul li css to

ul {float:left; background: blue; }

Answer 4

After fighting with this interesting issue in several projects, and investigating why it happens, I finally believe I found both: a working and 'responsive' solution.

Here is the magic trick, live example: http://jsfiddle.net/superKalo/phabbtnx/

ul {
    list-style: none;
    position: relative;
    padding-left: 0; /* remove any left padding */
    margin-left: 0; /* remove any left margin */
    left: 35px;
}
li {
    padding-left: 0; /* remove any left padding */
    margin-left: 0; /* remove any left margin */
    text-indent: -19px; /* adjust as much as needed */
}
li:before {
    content: '•\00a0\00a0\00a0';
    color: #000; /* bonus: you can customize the bullet color */
}

Answer 5

You could try also floating the ul to the left, and define an appropriate width for it, so that it floats next to the image.

Something a little like this jsfiddle?

Answer 6

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"