Question

I’m working on an RSS reader so I am pulling in HTML from RSS feeds. I want to display it in my own site, but I am trying to format it so it doesn’t break the layout.

In Chrome, it works just fine. I found a situation where images could be too wide so they would break out of the containing article tag when the page was resized. I fixed that by using:

article * {
    max-width: 100%;
    height: auto !important;
}

Firefox, however, will not resize my images to fit the parent container. The following jsfiddle page shows the behavior. If you shrink the output frame it doesn’t break in Chrome, but in Firefox, the images will break out of the box instead of resizing.

http://jsfiddle.net/CL6rc/12/

How can I get this to work in Firefox or is it even possible?

Answer 1

I had one of the containers set to float: left

Removing that property fixed the problem (the original jsfiddle link had the float left out so it did indeed work in Firefox)