Why do my list item bullets overlap floating elements

Question

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.

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.

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"

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

Why overflow: hidden works

The solution is as easy as:

ul {overflow: hidden;}

A block box with overflow: other than visible establishes a new block formatting context for its contents. W3C recommendation: http://www.w3.org/TR/CSS2/visuren.html#block-formatting

Example

The buttons on my website, which are <li> in disguise, are made like this. Make the viewport (window) of your browser smaller to see the indenting in action.

Related answers

• https://stackoverflow.com/a/710264/2192488
• https://stackoverflow.com/a/16041390/2192488

Article with examples

• Overflow – a secret benefit