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.