Browsera Blog Cross-Browser Site Compatibility

Floats Don’t Shrink To Fit in Firefox 2

Most web developers are no longer supporting Firefox 2, since its market share has all but eroded away, but just in case someone has this problem in a different browser, I thought I’d mention it.  The site wizehive.com uses a very basic float style for their header and back links, however, in Firefox 2, the back link wraps to the next line.  Why?  After doing some digging, it turns out this is because of a change between the CSS 2 -> CSS 2.1 standards. CSS 2 required an explicit width, while CSS 2.1 automatically shrinks the container to fit it’s contents.  So, if you experience this in FF2, or any other browser, set an explicit width on that element to put it back in the right spot.