Save 10% on our Pro WordPress plugins with discount code: 10PERCENT
Web Dev + WordPress + Security

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:

[ Screenshot: Unordered list wrapping against floated image ]

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

[ Screenshot: Unordered list wrapping against floated image (via Inspect Element) ]

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:

[ Screenshot: Unordered list with margin between floated image ]

..which looks like this under the hood:

[ Screenshot: Unordered list with margin between floated image (via Inspect Element) ]

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:

[ Screenshot: Div stretching full-width behind floated image ]

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:

[ Screenshot: Div sitting next to floated image ]

..and via Inspect Element:

[ Screenshot: Div sitting next to floated image (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+.

Jeff Starr
About the Author
Jeff Starr = Fullstack Developer. Book Author. Teacher. Human Being.
Blackhole Pro: Trap bad bots in a virtual black hole.

39 responses to “Force Margin/Space Between List and Floated Image”

  1. Hi Jeff,

    Great fix.

    One question, why do these two properties fix this issue?

    Was it just trial and error?

    Ben

  2. Laszlo Radics 2013/08/28 4:59 am

    the keyword is: “Block formating context”. It’s very important to known.

  3. A new block formatting context can be created not only by the overflow property. There are other methods too. All of them won’t hide the overflowing content :)

  4. Great fix, thanks for sharing.

  5. Peter Sorensen 2013/08/28 6:27 am

    Excellent! Tripped onto this only to find it’s exactly what I’ve been needing. Thanks!

  6. Boris Delev 2013/08/28 5:43 am

    …you can set list-style-position: inside; to “li” element and… ready.

  7. Thank you very much!

  8. Can anyone briefly explain why this works for the newbies?

  9. Over the years, looking for a solution. Sir, you are just darling!

  10. been waiting for this for way too long…

  11. Samiullah Khan 2013/08/28 11:01 pm

    I really like this, but i don’t like this nature of hacking css, look we don’t have any clear reason why this is happening. When ever you ask such you get answers like “according to w3c this property supposed to work that way”. CSS you are to young as far as layout is concerned.

  12. Patrick Samphire 2013/08/30 2:52 am

    I spent so long trying to figure out how to do this, and eventually gave up. Thank you! You’re awesome. Bookmarked!

Comments are closed for this post. Something to add? Let me know.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
WP Themes In Depth: Build and sell awesome WordPress themes.
Thoughts
Making great strides on my new book. Planned release in December :)
To organize my life, I keep it simple. online: plain text files, offline: sticky notes.
Official list of Googlebot IP addresses.
Lot of 1s in today’s date 20211111.
Working on a new book :)
I enjoy listening to original Star Trek and NG episodes while working online. After a while it feels like I’m working on the ship as part of the crew, going on adventures.
New version (2.6) of my shapeSpace starter theme now available! Always free & open source for everyone :)
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.