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

Disclaimer

Lists next to floated elements cause issues. In my opinion, the best way to prevent these sorts of floating issues is to avoid floating images that intersect with content. It'll also help when you have to support responsive design.

A simple design of having centered images between paragraphs will look very attractive and be much easier to support than trying to get too fancy. It's also one step away from a

.

But I really want floated images!

Ok, so if you're crazy persistent enough to continue down this path, there are a couple techniques that can be used.

The simplest is to make the list use overflow: hidden or overflow: scroll so that the list is essentially shrink wrapped which pulls the padding back to where it's useful:

img {
  float: left;
}
.wrapping-list {
  overflow: hidden;
  padding-left: 40px;
}

  
lorem
  
ipsum
  
dolor
  
sit
  
amet

This technique has a few problems though. If the list gets long, it doesn't actually wrap around the image, which pretty much defeats the entire purpose of using float on the image.

img {
  float: left;
}
.wrapping-list {
  overflow: hidden;
  padding-left: 40px;
}

  
lorem
  
ipsum
  
dolor
  
sit
  
amet
  
lorem
  
ipsum
  
dolor
  
sit
  
amet
  
lorem
  
ipsum
  
dolor
  
sit
  
amet

But I really want wrapping lists!

Ok, so if you're even crazier more persistent and you absolutely must continue down this path, there's another technique that can be used to wrap the list items and maintain bullets.

Instead of padding the

and trying to get it to behave nicely with bullets (which it never seems to want to do), take those bullets away from the
and give them to the
• s. Bullets are dangerous, and the
  just isn't responsible enough to handle them properly.

  img {
    float: left;
  }
  .wrapping-list {
    padding: 0;
    list-style-position: inside;
  }
  .wrapping-list li {
    overflow: hidden;
    padding-left: 25px;
  }

  
  
    
  lorem
    
  ipsum
    
  dolor
    
  sit
    
  amet
    
  lorem
    
  ipsum
    
  dolor
    
  sit
    
  amet
    
  lorem
    
  ipsum
    
  dolor
    
  sit
    
  amet
  

  This wrapping behavior can do weird things to complex content, so I don't recommend adding it by default. It's much easier to set it up as something that can be opted into rather than something that has to be overridden.