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.
I totally agree with you that Wordpress has it’s problems and they are mainly these little things that are so hard to notice but they can drive you crazy. It’s good to know about this display:table property if someday I have the same problem, thanks for sharing:)
You’re my hero. BTW excellent title
Agreed with you. But a programmer has to do some think to overcome these issues.
Thanks for posting this. I’m having a tough time getting my site to display properly on initial loading in FF. If I refresh, it works just fine in FF, but not when the cache is empty. Very weird !!
A most helpful post.
Thanks!
Thanks for pointing that out, but I already found out about that. I need a solution for this problem, not a diagnosis.
Btw, I nééd the display:table or an alternative.
@right:
Your money will be refunded for the use of this website.
Quite informative post. Keep up the good work.
It’s a strange problem, doesn’t seem to exist in IE though. Why removing display:table should resolve it is beyond me, but if it works it works I guess!
Good to finally find an article with some practical help on this issue.
fantastic blog this is what ive been looking for cheers web development
man, you saved my life with this post, i’ve been trying to solve this crap for months:P
Hello,
I’m looking for VirtueMart freelance developer or web designer webdesign.
Installing the site and I need someone to add functions to some site.
If you are interested thank you kindly send us a resume by mail.
Floats, CSS, Divs, the Refresh Button, Firefox, and Frustration | Webinade - Web Development & Programming Blog great article thank you.