De rebus fluitantibus pernotatisque

(Disclaimer: Until, oh, this week, I hadn't done any web design since pre-CSS. Please don't take me for someone who knows what they're doing.)

So interesting fact: A float: left block interacts very poorly with <li> bullets.

Direct Implementation

• Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
• Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
• Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

This isn't an artifact of a particular browser's implementation; this is (almost) a direct result of the CSS specifications. Items have padding-left or margin-left applied to them to indent them, and their bullets sit in this space; however, floated boxes sit atop other blocks' margins and padding. (Theoretically, I think, a browser could implement list-item prefixes as some form of non-margin non-padding spacing, but even if it's theoretically possible, no one does it, so it won't help much.)

You could attempt to tweak the margins, if you know the width of the floated box...

Cheating Implementation: Explicit Padding

• Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
• Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
• Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

... but then the indentation doesn't reset when you pass up the floated block.

As it happens, it's quite possible to remove the bullets using list-style: none, and equally possible to insert new bullets manually using the :before selector. This also sort-of replicates the behavior of list items:

Cheating Implementation: No Padding

• • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
• • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
• • Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Of course, list-indentation having been totally removed, it still doesn't look right. So is there a way to have properly indented, bulleted, and flowed list-items to the right of a float: left block?

I suspect a combination of :not, :first-line, and :before could do it, if that were supported. And allowed by CSS 3 at all.