Minimum Paragraph Widths, Revisited

by Jeff Bradberry

There's a great little demo up on css-tricks.com, demonstrating a technique that uses CSS pseudo-elements to prevent paragraphs from becoming too squeezed when flowing around floated images.

The thing is, it didn't work when I tried to do it myself.

At least, not in my preferred browser, Firefox. And what was really puzzling was that the demo did work in the exact same browser.

Then I found https://bugzilla.mozilla.org/show_bug.cgi?id=290146. Apparently, Firefox has had a bug until recently where elements with overflow: hidden set (perhaps scroll and auto as well) would fail to establish a new block formatting context when the element was at the top of the container. The css-tricks.com demo works, then, because of the 1px red border. If you turn off that css using Firebug (or whatever), you'll be able to see the problem there as well.

My workaround? I've added a 1px top padding to my <p> elements.

I hope that this post spares someone else the frustration I experienced tracking this down.