How to Clear HTML Lists Next to a Left-aligned Image

Say you’ve got a layout like this:

a layout with one image on the left and an unordered list on the right.

That’s one image on the left, and it has float:left applied to it so we can align it to the left.

The problem is, those bullets in the unordered list are not displaying correctly. If we look at the inspector in Chrome, this is what’s actually happening:

example of how the ul is actually positioned in the browser

The <ul> is actually stretching behind the image, causing our bullets to be off. This is an easy enough fix though, at least in Chrome. Just use this CSS:

.additional-text ul {
column-count: 1;
}

That gives us this, with the bullets aligned properly:

the correctly displayed outcome

Up Next: Woocommerce Taxes Not Working? Here's the Simplest of All Solutions