Why do my list item bullets overlap floating elements

Problem

I have a (XHTML Strict) page on which I float an image over regular text paragraphs. Except when a list is used instead of paragraphs, everything flows smoothly. The list’s bullets overlay the floating image.

The list items are pushed to the right inside the li by the float, which is calculated from the left of the page. As a result, the margin is only useful if it is wider than the image.

It also works to float the list next to the image, but I’m not sure what happens when the list is adjacent to a float. To fix this, I don’t want to float every list in my content. When an image is floated to the right instead of the left of the list, floating left screws up the layout.

Setting li list-style-position: inside aligns the bullets with the content, but it also causes lines that wrap to begin aligned with the bullet rather than the line above.

The issue is clearly caused by the bullet being rendered outside the box, with the float pushing the box’s contents to the right (not the box itself). This is how IE and FF handle the scenario, and it’s not improper according to the spec, as far as I’m aware. The question is, how can I prevent it?

Asked by Kamiel Wanrooij

Solution #1

This problem has a solution for me. Adding an ul overflow: hidden; to the ul ensures that the float pushes the box itself aside, rather than the contents of the box.

Only Internet Explorer 6 requires an ul zoom: 1; in our conditional remarks to ensure that the ul has layout.

Answered by Kamiel Wanrooij

Solution #2

Glen E. Ivey’s solution has been improved:

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

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

This method is preferred because it works when the list must flow around the floating image, whereas the overflow: hidden method does not. However, padding-right: 1em must be added to the li to prevent them from overflowing their container.

Answered by Blazemonger

Solution #3

The “display” property comes into its own at this point. To make the list function with the floated content, use the CSS below.

display: table; works in conjunction with floating content (filling the gap), but does not obscure content. In the same way as a table does:-)

EDIT: Don’t forget to add a class to separate which lists you want to work on. For example, “ul.in-content” or “.content ul”

Answered by martinedwards

Solution #4

To adjust the layout of the bullets, use list-style-position: inside.

Answered by annakata

Solution #5

It’s as simple as this:

ul {overflow: hidden;}

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

This is how the buttons on my website, which are disguised as li>, are made. Reduce the size of your browser’s viewport (window) to see the indenting in action.

Answered by Serge Stroobandt

Post is based on https://stackoverflow.com/questions/710158/why-do-my-list-item-bullets-overlap-floating-elements