Force Margin/Space Between List and Floated Image

Updated June 28, 2024 • 39 comments

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+.

About the Author

Jeff Starr = Web Developer. Book Author. Secretly Important.

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

Helena 2013/08/27 10:18 am

This is such an elegant solution Jeff. Thank you for sharing! I’ve recently come across exactly this problem and addressed it by overriding the list styles after images. I much prefer your solution though. Great!

Jeff Starr 2013/08/27 12:38 pm • Post Author

Thanks for the feedback, Helena — glad to hear it helps! :)

Lee 2013/08/27 4:34 pm

Great article, Jeff! Thanks. I have been trying to fix this for quite a long time. Now I don’t have to do “work-arounds” on individual articles. The site looks great too! (I like the “Do it” button.)

Jason 2013/08/27 7:17 pm

If I can memorize this technique, this will be one of the greatest assets. Thanks!

Jeff Starr 2013/08/27 7:24 pm • Post Author

Lol, yes it’s simple and effective: just remember width:auto; overflow:hidden; :)

Karl J. Gephart 2013/08/27 7:43 pm

Very nice article! You’ve saved me a lot of heavily coded work-arounds! Thanks!

Peter Mumford 2013/08/27 7:56 pm

brilliant! I’ve been stumped by this one for ages.

Pavel Linhart 2013/08/27 9:58 pm

Been using this for a few years now, quite handy – you can even make oldIE do the same trick by just adding zoom: 1; or any other safe hasLayout trigger that doesn’t break anything else.

Also you should not need to set width to auto unless it has been set before :)

However, it has its obvious drawbacks – now with text|box-shadows and other effects the hidden overflow is a bit of a bummer… The same effect can be emulated by some clever display: table + display: table-cell stuff, but that requires a bit more code and suffers from its own problems.

Delia 2013/08/27 9:03 pm

Yes. Thank you so much for this tip, Jeff. I’m sure I’ll use it frequently.

Fink 2013/08/28 12:14 am

I never thought that this could be remedied so simple and clean. Thanks a lot!

Paul Radzkov 2013/08/28 1:33 am

In some cases when you have a lot of text in each li or small floated image it is better to set overflow:hidden on list items to avoid empty space under the image: http://paulradzkov.com/2013/lists_and_floats/

Johan 2013/08/28 12:47 am

Just remember that the text in the block element will no longer flow around the floated element. Which is kind of the idea with floats in the first place.

MaxArt 2013/08/28 2:43 am

I’ve been looking for a simple solution for this for ages.
Thank you.

Ben 2013/08/28 4:41 am

Hi Jeff,

Great fix.

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

Was it just trial and error?

Ben

Comments are closed for this post. Something to add? Let me know.

Helena 2013/08/27 10:18 am

This is such an elegant solution Jeff. Thank you for sharing! I’ve recently come across exactly this problem and addressed it by overriding the list styles after images. I much prefer your solution though. Great!
- Jeff Starr 2013/08/27 12:38 pm • Post Author
  
  Thanks for the feedback, Helena — glad to hear it helps! :)
Lee 2013/08/27 4:34 pm

Great article, Jeff! Thanks. I have been trying to fix this for quite a long time. Now I don’t have to do “work-arounds” on individual articles. The site looks great too! (I like the “Do it” button.)
Jason 2013/08/27 7:17 pm

If I can memorize this technique, this will be one of the greatest assets. Thanks!
- Jeff Starr 2013/08/27 7:24 pm • Post Author
  
  Lol, yes it’s simple and effective: just remember width:auto; overflow:hidden; :)
Karl J. Gephart 2013/08/27 7:43 pm

Very nice article! You’ve saved me a lot of heavily coded work-arounds! Thanks!
Peter Mumford 2013/08/27 7:56 pm

brilliant! I’ve been stumped by this one for ages.
Pavel Linhart 2013/08/27 9:58 pm

Been using this for a few years now, quite handy – you can even make oldIE do the same trick by just adding zoom: 1; or any other safe hasLayout trigger that doesn’t break anything else.

Also you should not need to set width to auto unless it has been set before :)

However, it has its obvious drawbacks – now with text|box-shadows and other effects the hidden overflow is a bit of a bummer… The same effect can be emulated by some clever display: table + display: table-cell stuff, but that requires a bit more code and suffers from its own problems.
Delia 2013/08/27 9:03 pm

Yes. Thank you so much for this tip, Jeff. I’m sure I’ll use it frequently.
Fink 2013/08/28 12:14 am

I never thought that this could be remedied so simple and clean. Thanks a lot!
Paul Radzkov 2013/08/28 1:33 am

In some cases when you have a lot of text in each li or small floated image it is better to set overflow:hidden on list items to avoid empty space under the image: http://paulradzkov.com/2013/lists_and_floats/
Johan 2013/08/28 12:47 am

Just remember that the text in the block element will no longer flow around the floated element. Which is kind of the idea with floats in the first place.
MaxArt 2013/08/28 2:43 am

I’ve been looking for a simple solution for this for ages.
Thank you.
Ben 2013/08/28 4:41 am

Hi Jeff,

Great fix.

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

Was it just trial and error?

Ben

1234 • Newer Comments »