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 the following on your UL tag. This should take care of the bullets overlaying your image and you don't have to mess up your left allignment caused by list-position: inside.

overflow: hidden; 
padding-left: 2em; 

Answer 2

I fixed it with

div.class-name ul {
  clear: both;
}

Answer 3

Struggled with this myself. Best I've managed is the following:

ul {
    list-style-position: inside;
    padding-left: 1em;
    text-indent: -1em;
}

The text is not actually indented but the bullet shows.

Answer 4

You could assign position: relative; left: 10px; to the li. (You may additionally want to give it a margin-right: 10px;, otherwise it might become too wide on the right side.)

Or, if you want to use float for the ul -- as suggested by others -- you can probably stop the rest from floating right of the ul by using clear: left on the element that follows the ul.

Answer 5

or you could do this:

 #content ul {
        background:none repeat scroll 0 0 #AACCDD;
        float:left;
        margin-right:10px;
        padding:10px;

and then remove all the styling from the li

Answer 6

By adding overflow: auto; to your ul works for me at least.

Update

I've updated my jsfiddle to visualize what's going on. When having the ul beside the floating img, the content of the ul will be pushed by the float, but not the actual container. By adding overflow: auto the whole ul-box will be pushed by the float instead of only the content.