Force Margin/Space Between List and Floated Image

Updated June 26, 2018 • 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 = Creative thinker. Passionate about free and open Web.

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

Phần mềm 2013/08/30 11:49 pm

This is very useful trick. How about applying overflow hidden for parent element? It often fixes issue with float.

Cindy Bryant 2013/09/02 11:31 am

I just wanted to thank you for the snippet of code for clearfix hack. I used it exactly as you listed in the “all together” at the bottom of your post and it worked like a charm! I was going crazy for two days trying to get some inline-blocks to line up and safari wouldn’t hear of it, but your clearfix hack fixed it in all browsers. Thank you so much!

PS. I’m a newbie in the web design/dev world so, it’s hard to find good updated snippets like this one.

Cindy Bryant 2013/09/02 11:40 am

I just wanted to thank you for the snippet of code for clearfix hack. I used it exactly as you listed in the “all together” at the bottom of your post and it worked like a charm! I didn’t want to use the WP default search widget because it doesn’t allow for placeholder text onfocus blur… And so, I got a bit creative and added some html to a WP text widget instead and using my own psd/images, added some matching css. Long story short I placed this widget at the sidebar and safari did not want anything to do with my inline-block. So for two days I searched the net and tried so many different snippets and none worked, until I came across your “clearfix hack” the updated version. Thank you so much your snippet of code worked like a charm, and fixed it in all browsers. Reason why I had to go this route is because the framework I’m using does not allow me to create a child theme, and I couldn’t access their html, so this was the only way I could figure out around it. I’m sure there are better solutions, but I’m new at this stuff and still learning. At the end I got my search bar with the “Search site…” that works onfocus and blur… Thanks.

PS. I’m a newbie in the web design/dev world so, it’s hard to find good updated snippets like this one.

Theo 2013/09/02 11:44 am

Really nice solution. The only downside i see is with large lists as you will have some blank space if your image is shorter.Please correct me if i’m wrong.

Kumaresh 2013/09/03 6:57 am

Nice trick. Job done.

Matt McDowell 2013/09/03 9:31 pm

Yes! one of my faves.

I personally use overflow: auto;

I believe I first heard about it here:
http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/

@skip405: thanks! bookmarked.

Emil Uzelac 2013/09/04 10:30 am

Nice one for sure, but this might not work all the time especially if you have dropdowns within your content area and targeting specific classes would take too much time.

Here’s what I usually do :)

ul {
left: 1.000em;
position: relative;
top: 0;
}

Martynas 2013/09/09 6:34 am

I usally do:

.post {
padding-left: imageWidth;
position: relative;
}

.post img {
left: 0;
position: absolute;
top: 0;
}

Romuald Bernard 2013/09/12 5:22 am

To avoid this issue, I usually make the parent element and all its children elements float. To prevent the element below from floating, I add a “width: 100%” to the parent element.

Lorem ipsum dolor sit amet.
eeeeeeeeeeeeeeeeeeeeeee
Lorem ipsum dolor sit amet.

#content {
width: 100%;
}
#content, #content img, .popout, #content p, #content ul {
float: left;
}
.popout {
margin: 0 30px;
}

Tom Rudge 2013/09/17 4:49 am

Brilliant – I saw this article via css tricks a few weeks ago. Just had this problem and I knew I read a solution somewhere! Thanks

Shaw 2013/09/17 7:35 am

Great tip! I ran across this issue today and had to do some search to turn this article up again :-)

In testing with Chrome, I found that overflow: auto; is all that is needed to get the element to reflow around the floated object. Not sure how other browsers react, but it’s worth noting!

Anything Graphic 2013/09/18 7:48 am

Very useful trick indeed! WordPress has this exact problem, or at least the framework I used to use had it. Easily fixed! Thanks for this.

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

Phần mềm 2013/08/30 11:49 pm

This is very useful trick. How about applying overflow hidden for parent element? It often fixes issue with float.
Cindy Bryant 2013/09/02 11:31 am

Hi

I just wanted to thank you for the snippet of code for clearfix hack. I used it exactly as you listed in the “all together” at the bottom of your post and it worked like a charm! I was going crazy for two days trying to get some inline-blocks to line up and safari wouldn’t hear of it, but your clearfix hack fixed it in all browsers. Thank you so much!

PS. I’m a newbie in the web design/dev world so, it’s hard to find good updated snippets like this one.
Cindy Bryant 2013/09/02 11:40 am

Hi

I just wanted to thank you for the snippet of code for clearfix hack. I used it exactly as you listed in the “all together” at the bottom of your post and it worked like a charm! I didn’t want to use the WP default search widget because it doesn’t allow for placeholder text onfocus blur… And so, I got a bit creative and added some html to a WP text widget instead and using my own psd/images, added some matching css. Long story short I placed this widget at the sidebar and safari did not want anything to do with my inline-block. So for two days I searched the net and tried so many different snippets and none worked, until I came across your “clearfix hack” the updated version. Thank you so much your snippet of code worked like a charm, and fixed it in all browsers. Reason why I had to go this route is because the framework I’m using does not allow me to create a child theme, and I couldn’t access their html, so this was the only way I could figure out around it. I’m sure there are better solutions, but I’m new at this stuff and still learning. At the end I got my search bar with the “Search site…” that works onfocus and blur… Thanks.

PS. I’m a newbie in the web design/dev world so, it’s hard to find good updated snippets like this one.
Theo 2013/09/02 11:44 am

Really nice solution. The only downside i see is with large lists as you will have some blank space if your image is shorter.Please correct me if i’m wrong.
Kumaresh 2013/09/03 6:57 am

Nice trick. Job done.
Matt McDowell 2013/09/03 9:31 pm

Yes! one of my faves.

I personally use overflow: auto;

I believe I first heard about it here:
http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/

@skip405: thanks! bookmarked.
Emil Uzelac 2013/09/04 10:30 am

Nice one for sure, but this might not work all the time especially if you have dropdowns within your content area and targeting specific classes would take too much time.

Here’s what I usually do :)

ul {
left: 1.000em;
position: relative;
top: 0;
}
Martynas 2013/09/09 6:34 am

I usally do:

.post {
padding-left: imageWidth;
position: relative;
}

.post img {
left: 0;
position: absolute;
top: 0;
}
Romuald Bernard 2013/09/12 5:22 am

To avoid this issue, I usually make the parent element and all its children elements float. To prevent the element below from floating, I add a “width: 100%” to the parent element.

Lorem ipsum dolor sit amet.
eeeeeeeeeeeeeeeeeeeeeee
Lorem ipsum dolor sit amet.

#content {
width: 100%;
}
#content, #content img, .popout, #content p, #content ul {
float: left;
}
.popout {
margin: 0 30px;
}
Tom Rudge 2013/09/17 4:49 am

Brilliant – I saw this article via css tricks a few weeks ago. Just had this problem and I knew I read a solution somewhere! Thanks
Shaw 2013/09/17 7:35 am

Great tip! I ran across this issue today and had to do some search to turn this article up again :-)

In testing with Chrome, I found that overflow: auto; is all that is needed to get the element to reflow around the floated object. Not sure how other browsers react, but it’s worth noting!
Anything Graphic 2013/09/18 7:48 am

Very useful trick indeed! WordPress has this exact problem, or at least the framework I used to use had it. Easily fixed! Thanks for this.

« Previous Comments • 1234 • Newer Comments »