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 <figure>.

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;
}

<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
  <li>lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
  <li>amet</li>
</ul>

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;
}

<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
  <li>lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
  <li>amet</li>
  <li>lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
  <li>amet</li>
  <li>lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
  <li>amet</li>
</ul>

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 <ul> and trying to get it to behave nicely with bullets (which it never seems to want to do), take those bullets away from the <ul> and give them to the <li>s. Bullets are dangerous, and the <ul> 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;
}

<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
  <li>lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
  <li>amet</li>
  <li>lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
  <li>amet</li>
  <li>lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
  <li>amet</li>
</ul>

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.

Answer 2

Working inside an LMS without access to head of doc, found it easier to go with margin-right: 20px as an inline style for the image. Which I owe to this site.

Answer 3

I am using this to solve this problem:

ul {
   display: table;
}

Answer 4

width: 300px;
height: 30px;
margin-left: auto;
right: 10px;

margin-left: auto will cause the element itself to be right aligned. Set height and width of the element you want - in my it's a background image in a div inside

Answer 5

Adding an improvement to Glen E. Ivey's solution:

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

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

I prefer this technique, since it works when the list needs to flow around the floating image, while the overflow: hidden technique will not. However, it's also necessary to add padding-right: 1em to the li to keep them from overflowing their container.

Answer 6

At http://archivist.incutio.com/viewlist/css-discuss/106382 I found a suggestion that worked for me: style the 'li' elements with:

position: relative;
left: 1em;

Where you replace "1em" with the width of the left padding/margin that your list items would have if the float weren't present. This works great in my application, even handling the case where the bottom of the float occurs in the middle of the lists--the bullets shift back over to the (local) left margin just right.