Force Margin/Space Between List and Floated Image

If you’re displaying floated images in your posts, you may notice that margins of lists and other block-level elements seem to “collapse”, as shown in this screenshot from the 2013 redesign:

And here is what is happening behind the scenes (Chrome browser):

As you can see, the list is simply ignoring the floated item and stretching across the entire width of the content area. Depending on the design, this may not be a huge deal, but there is an easy way to prevent it from happening. Just apply a width and overflow property to the list element:

.content ul, .content ol { width: auto; overflow: hidden; }

Applying that code, the margin kicks in and we get this:

..which looks like this under the hood:

This trick also works on other block-level elements, such as <div>s. Here is another example from the recent redesign, which shows a <div> stretching full-width behind the floated element, again in Chrome:

To get the popout <div> to sit next to the floated image — without floating it — we apply the simple fix:

.popout { width: auto; overflow: hidden; }

..which gives us this:

..and via Inspect Element:

That’s pretty much it, although for this design I opted to let the popout divs stretch behind the floated images, just seems like a nice effect :)

This technique tested on latest Chrome 67+, Firefox 60+, and Opera 53+.

About the Author

Jeff Starr = Fullstack Developer. Book Author. Teacher. Human Being.