Why do my list item bullets overlap floating elements

Problem

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 the list overlap the floated image.

Changing the margin of the list or the list items does not help. The margin is calculated from the left of the page, but the float pushes the list items to the right inside the li itself. So the margin only helps if I make it wider than the image.

Floating the list next to the image also works, but I don’t know when the list is next to a float. I don’t want to float every list in my content just to fix this. Also, floating left messes up the layout when an image is floated to the right instead of left of the list.

Setting li { list-style-position: inside } does move the bullets along with the content, but it also causes lines that wrap to start aligned with the bullet, instead of aligned with 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 situation, and it’s not wrong according to the spec, as far as I’m aware. The question is, what can I do to avoid 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 alongside floated content (filling the gap) but without hiding content behind it. Much like a table does 🙂

EDIT: Remember to add a class to isolate which lists you wish to do this for. 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