How to Clear HTML Lists Next to a Left-aligned Image
Say you’ve got a layout like this:
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:
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:
Up Next: Woocommerce Taxes Not Working? Here's the Simplest of All Solutions