Floats, CSS, Divs, the Refresh Button, Firefox, and Frustration
WordPress is a funny beast, really it is. Usually, building a WordPress site involves something like digging through a hundred pages of templates until you find one that’s merely passable. Once you do, you grab it and start hacking away at everything to make it your own – CSS, HTML, everything. And it’s fine. Really, it is – the internet’s built on sharing ideas. The problem appears once you start inheriting other people’s problems. In this case, I had to hit the refresh key just to get my divs to float correctly.
The thing with using a tableless design is that people tend to create an outer division to put other inner divisions into. Usually this looks like a main content box with two columns in it, which is what I had. In order to get those columns to line up side by side, you tell the css of those divs to float:left;. Here’s where we inherit the problem, however. When I visit the page for the first time, or reload the page without using the cache, the floats start clearing one another, even though I have never set a clear css property on either of the divisions. (If you don’t know what I mean by “clearing”, imagine you want to put two columns side by side, and instead they stack on top of one another.) The whole ordeal was rather frustrating, until I noticed one thing.
The outer, main content division had a property from before I started editing the css. The outer div was set to display:table;. I don’t know if it’s a bug, but the issue remains: If you have an outer div set to display:table, the inner divs will clear each other regardless of how you float them. The solution? I didn’t need the outer div to act like a table, so I just removed the display:table; property and now all is well.
I don’t know if you’ll be able to remove the display:table; property from your outer div, but you’ll have to find a way around it if this problem occurs in Firefox for you. I hope this helps someone track their problem down.
