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

How about this?

ul{float:left; clear:right}

Answer 2

width: auto; overflow: hidden;

Answer 3

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

Answer 4

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.

Answer 5

try this:

li{
    margin-left:5px;
}

If you want them to go left, just put in a -##px value.