Why Browsers May Be Ignoring Your Floats

Here’s a little tip I thought I’d share, and may be very obvious to many.

I had a design I was testing that had 2 column, 3 column, and 4 column floats all on one page. Problem was, the only browser that seem to actually float the divs was Opera. I spent a hefty chunk of time trying to figure out why Firefox especially was just putting one right after the other.

Turns out the answer was super simple. I had named my classes things like “3col” and “4col”. Once I renamed them to “threecol” and “fourcol” the whole thing worked perfectly in all browsers. So simple.

*insert head smashing desk*

Hopefully I’ll save somebody some time.

Leave a Comment